feat: transaction page
This commit is contained in:
efrilm
parent
3fb4170d02
commit
795281f52d
@ -1,39 +1,15 @@
|
|||||||
|
import 'dart:math' as math;
|
||||||
|
|
||||||
import 'package:auto_route/auto_route.dart';
|
import 'package:auto_route/auto_route.dart';
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:line_icons/line_icons.dart';
|
||||||
|
|
||||||
import '../../../common/theme/theme.dart';
|
import '../../../common/theme/theme.dart';
|
||||||
|
import '../../components/button/button.dart';
|
||||||
class Transaction {
|
import '../../components/spacer/spacer.dart';
|
||||||
final String id;
|
import 'widgets/appbar.dart';
|
||||||
final String customerName;
|
import 'widgets/status_tile.dart';
|
||||||
final DateTime date;
|
import 'widgets/transaction_tile.dart';
|
||||||
final double total;
|
|
||||||
final String status;
|
|
||||||
final List<TransactionItem> items;
|
|
||||||
final String paymentMethod;
|
|
||||||
|
|
||||||
Transaction({
|
|
||||||
required this.id,
|
|
||||||
required this.customerName,
|
|
||||||
required this.date,
|
|
||||||
required this.total,
|
|
||||||
required this.status,
|
|
||||||
required this.items,
|
|
||||||
required this.paymentMethod,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
class TransactionItem {
|
|
||||||
final String name;
|
|
||||||
final int quantity;
|
|
||||||
final double price;
|
|
||||||
|
|
||||||
TransactionItem({
|
|
||||||
required this.name,
|
|
||||||
required this.quantity,
|
|
||||||
required this.price,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
@RoutePage()
|
@RoutePage()
|
||||||
class TransactionPage extends StatefulWidget {
|
class TransactionPage extends StatefulWidget {
|
||||||
@ -43,665 +19,264 @@ class TransactionPage extends StatefulWidget {
|
|||||||
State<TransactionPage> createState() => _TransactionPageState();
|
State<TransactionPage> createState() => _TransactionPageState();
|
||||||
}
|
}
|
||||||
|
|
||||||
class _TransactionPageState extends State<TransactionPage> {
|
class _TransactionPageState extends State<TransactionPage>
|
||||||
String selectedFilter = 'All';
|
with TickerProviderStateMixin {
|
||||||
DateTime selectedDate = DateTime.now();
|
late AnimationController _fadeController;
|
||||||
|
late AnimationController _slideController;
|
||||||
|
late AnimationController _rotationController;
|
||||||
|
late Animation<double> _fadeAnimation;
|
||||||
|
late Animation<Offset> _slideAnimation;
|
||||||
|
late Animation<double> _rotationAnimation;
|
||||||
|
|
||||||
final List<Transaction> transactions = [
|
// Filter state
|
||||||
|
String selectedFilter = 'All';
|
||||||
|
final List<String> filterOptions = [
|
||||||
|
'All',
|
||||||
|
'Completed',
|
||||||
|
'Pending',
|
||||||
|
'Refunded',
|
||||||
|
];
|
||||||
|
|
||||||
|
@override
|
||||||
|
void initState() {
|
||||||
|
super.initState();
|
||||||
|
|
||||||
|
_fadeController = AnimationController(
|
||||||
|
duration: const Duration(milliseconds: 800),
|
||||||
|
vsync: this,
|
||||||
|
);
|
||||||
|
|
||||||
|
_slideController = AnimationController(
|
||||||
|
duration: const Duration(milliseconds: 1000),
|
||||||
|
vsync: this,
|
||||||
|
);
|
||||||
|
|
||||||
|
_rotationController = AnimationController(
|
||||||
|
duration: const Duration(seconds: 3),
|
||||||
|
vsync: this,
|
||||||
|
)..repeat();
|
||||||
|
|
||||||
|
_fadeAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
|
||||||
|
CurvedAnimation(parent: _fadeController, curve: Curves.easeInOut),
|
||||||
|
);
|
||||||
|
|
||||||
|
_slideAnimation =
|
||||||
|
Tween<Offset>(begin: const Offset(0, 0.3), end: Offset.zero).animate(
|
||||||
|
CurvedAnimation(parent: _slideController, curve: Curves.elasticOut),
|
||||||
|
);
|
||||||
|
|
||||||
|
_rotationAnimation = Tween<double>(
|
||||||
|
begin: 0,
|
||||||
|
end: 2 * math.pi,
|
||||||
|
).animate(_rotationController);
|
||||||
|
|
||||||
|
_fadeController.forward();
|
||||||
|
_slideController.forward();
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
void dispose() {
|
||||||
|
_fadeController.dispose();
|
||||||
|
_slideController.dispose();
|
||||||
|
_rotationController.dispose();
|
||||||
|
super.dispose();
|
||||||
|
}
|
||||||
|
|
||||||
|
final sampleTransactions = [
|
||||||
Transaction(
|
Transaction(
|
||||||
id: 'TRX001',
|
id: 'TXN001',
|
||||||
customerName: 'Ahmad Rizki',
|
customerName: 'John Doe',
|
||||||
date: DateTime.now().subtract(Duration(hours: 2)),
|
date: DateTime.now().subtract(const Duration(hours: 2)),
|
||||||
total: 125000,
|
totalAmount: 125000,
|
||||||
status: 'Completed',
|
itemCount: 3,
|
||||||
paymentMethod: 'Cash',
|
paymentMethod: 'Cash',
|
||||||
items: [
|
status: TransactionStatus.completed,
|
||||||
TransactionItem(name: 'Nasi Goreng', quantity: 2, price: 25000),
|
receiptNumber: 'RCP-2024-001',
|
||||||
TransactionItem(name: 'Es Teh', quantity: 3, price: 5000),
|
|
||||||
TransactionItem(name: 'Ayam Bakar', quantity: 1, price: 35000),
|
|
||||||
],
|
|
||||||
),
|
),
|
||||||
Transaction(
|
Transaction(
|
||||||
id: 'TRX002',
|
id: 'TXN002',
|
||||||
customerName: 'Siti Nurhaliza',
|
customerName: 'Jane Smith',
|
||||||
date: DateTime.now().subtract(Duration(hours: 4)),
|
date: DateTime.now().subtract(const Duration(hours: 5)),
|
||||||
total: 85000,
|
totalAmount: 87500,
|
||||||
status: 'Completed',
|
itemCount: 2,
|
||||||
paymentMethod: 'QRIS',
|
paymentMethod: 'QRIS',
|
||||||
items: [
|
status: TransactionStatus.pending,
|
||||||
TransactionItem(name: 'Gado-gado', quantity: 1, price: 20000),
|
receiptNumber: 'RCP-2024-002',
|
||||||
TransactionItem(name: 'Jus Jeruk', quantity: 2, price: 12000),
|
|
||||||
TransactionItem(name: 'Kerupuk', quantity: 1, price: 5000),
|
|
||||||
],
|
|
||||||
),
|
),
|
||||||
Transaction(
|
Transaction(
|
||||||
id: 'TRX003',
|
id: 'TXN003',
|
||||||
customerName: 'Budi Santoso',
|
customerName: 'Bob Johnson',
|
||||||
date: DateTime.now().subtract(Duration(hours: 6)),
|
date: DateTime.now().subtract(const Duration(days: 1)),
|
||||||
total: 200000,
|
totalAmount: 250000,
|
||||||
status: 'Pending',
|
itemCount: 5,
|
||||||
paymentMethod: 'Debit Card',
|
paymentMethod: 'Credit Card',
|
||||||
items: [
|
status: TransactionStatus.refunded,
|
||||||
TransactionItem(name: 'Paket Keluarga', quantity: 1, price: 150000),
|
receiptNumber: 'RCP-2024-003',
|
||||||
TransactionItem(name: 'Es Campur', quantity: 2, price: 15000),
|
|
||||||
],
|
|
||||||
),
|
),
|
||||||
];
|
];
|
||||||
|
|
||||||
|
// Filter transactions based on selected status
|
||||||
|
List<Transaction> get filteredTransactions {
|
||||||
|
if (selectedFilter == 'All') {
|
||||||
|
return sampleTransactions;
|
||||||
|
}
|
||||||
|
|
||||||
|
TransactionStatus? filterStatus;
|
||||||
|
switch (selectedFilter) {
|
||||||
|
case 'Completed':
|
||||||
|
filterStatus = TransactionStatus.completed;
|
||||||
|
break;
|
||||||
|
case 'Pending':
|
||||||
|
filterStatus = TransactionStatus.pending;
|
||||||
|
break;
|
||||||
|
case 'Refunded':
|
||||||
|
filterStatus = TransactionStatus.refunded;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
return sampleTransactions
|
||||||
|
.where((transaction) => transaction.status == filterStatus)
|
||||||
|
.toList();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Build filter chip
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
return Scaffold(
|
return Scaffold(
|
||||||
backgroundColor: AppColor.background,
|
backgroundColor: AppColor.background,
|
||||||
appBar: AppBar(
|
body: CustomScrollView(
|
||||||
elevation: 0,
|
slivers: [
|
||||||
backgroundColor: AppColor.white,
|
// Custom App Bar with Hero Effect
|
||||||
title: Text(
|
SliverAppBar(
|
||||||
'Transactions',
|
expandedHeight: 120,
|
||||||
style: TextStyle(
|
floating: true,
|
||||||
color: AppColor.textPrimary,
|
pinned: true,
|
||||||
fontSize: 20,
|
backgroundColor: AppColor.primary,
|
||||||
fontWeight: FontWeight.bold,
|
centerTitle: false,
|
||||||
),
|
flexibleSpace: TransactionAppBar(
|
||||||
),
|
rotationAnimation: _rotationAnimation,
|
||||||
actions: [
|
|
||||||
IconButton(
|
|
||||||
icon: Icon(Icons.search, color: AppColor.textPrimary),
|
|
||||||
onPressed: () {},
|
|
||||||
),
|
|
||||||
IconButton(
|
|
||||||
icon: Icon(Icons.filter_list, color: AppColor.textPrimary),
|
|
||||||
onPressed: () => _showFilterBottomSheet(context),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
body: Column(
|
|
||||||
children: [
|
|
||||||
_buildSummaryCards(),
|
|
||||||
_buildFilterTabs(),
|
|
||||||
Expanded(child: _buildTransactionList()),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
floatingActionButton: FloatingActionButton.extended(
|
|
||||||
onPressed: () {},
|
|
||||||
backgroundColor: AppColor.primary,
|
|
||||||
icon: Icon(Icons.add, color: AppColor.white),
|
|
||||||
label: Text(
|
|
||||||
'New Sale',
|
|
||||||
style: TextStyle(color: AppColor.white, fontWeight: FontWeight.w600),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
Widget _buildSummaryCards() {
|
|
||||||
return Container(
|
|
||||||
padding: EdgeInsets.all(16),
|
|
||||||
child: Row(
|
|
||||||
children: [
|
|
||||||
Expanded(
|
|
||||||
child: _buildSummaryCard(
|
|
||||||
'Today\'s Sales',
|
|
||||||
'Rp 2,450,000',
|
|
||||||
Icons.trending_up,
|
|
||||||
AppColor.success,
|
|
||||||
'+12%',
|
|
||||||
),
|
),
|
||||||
),
|
actions: [
|
||||||
SizedBox(width: 12),
|
ActionIconButton(onTap: () {}, icon: LineIcons.filter),
|
||||||
Expanded(
|
SpaceWidth(8),
|
||||||
child: _buildSummaryCard(
|
|
||||||
'Total Orders',
|
|
||||||
'48',
|
|
||||||
Icons.receipt_long,
|
|
||||||
AppColor.info,
|
|
||||||
'+8%',
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
Widget _buildSummaryCard(
|
|
||||||
String title,
|
|
||||||
String value,
|
|
||||||
IconData icon,
|
|
||||||
Color color,
|
|
||||||
String change,
|
|
||||||
) {
|
|
||||||
return Container(
|
|
||||||
padding: EdgeInsets.all(16),
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
color: AppColor.white,
|
|
||||||
borderRadius: BorderRadius.circular(12),
|
|
||||||
boxShadow: [
|
|
||||||
BoxShadow(
|
|
||||||
color: AppColor.black.withOpacity(0.05),
|
|
||||||
blurRadius: 10,
|
|
||||||
offset: Offset(0, 2),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
child: Column(
|
|
||||||
crossAxisAlignment: CrossAxisAlignment.start,
|
|
||||||
children: [
|
|
||||||
Row(
|
|
||||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
||||||
children: [
|
|
||||||
Icon(icon, color: color, size: 24),
|
|
||||||
Container(
|
|
||||||
padding: EdgeInsets.symmetric(horizontal: 8, vertical: 4),
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
color: AppColor.success.withOpacity(0.1),
|
|
||||||
borderRadius: BorderRadius.circular(12),
|
|
||||||
),
|
|
||||||
child: Text(
|
|
||||||
change,
|
|
||||||
style: TextStyle(
|
|
||||||
color: AppColor.success,
|
|
||||||
fontSize: 10,
|
|
||||||
fontWeight: FontWeight.w600,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
SizedBox(height: 12),
|
|
||||||
Text(
|
|
||||||
value,
|
|
||||||
style: TextStyle(
|
|
||||||
color: AppColor.textPrimary,
|
|
||||||
fontSize: 20,
|
|
||||||
fontWeight: FontWeight.bold,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
SizedBox(height: 4),
|
|
||||||
Text(
|
|
||||||
title,
|
|
||||||
style: TextStyle(
|
|
||||||
color: AppColor.textSecondary,
|
|
||||||
fontSize: 12,
|
|
||||||
fontWeight: FontWeight.w500,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
Widget _buildFilterTabs() {
|
// Pinned Filter Section
|
||||||
final filters = ['All', 'Completed', 'Pending', 'Cancelled'];
|
SliverPersistentHeader(
|
||||||
|
pinned: true,
|
||||||
return Container(
|
delegate: _FilterHeaderDelegate(
|
||||||
height: 60,
|
child: Container(
|
||||||
padding: EdgeInsets.symmetric(horizontal: 16),
|
color: AppColor.background,
|
||||||
child: ListView.builder(
|
padding: EdgeInsets.fromLTRB(
|
||||||
scrollDirection: Axis.horizontal,
|
AppValue.padding,
|
||||||
itemCount: filters.length,
|
10,
|
||||||
itemBuilder: (context, index) {
|
AppValue.padding,
|
||||||
final filter = filters[index];
|
10,
|
||||||
final isSelected = selectedFilter == filter;
|
|
||||||
|
|
||||||
return GestureDetector(
|
|
||||||
onTap: () {
|
|
||||||
setState(() {
|
|
||||||
selectedFilter = filter;
|
|
||||||
});
|
|
||||||
},
|
|
||||||
child: Container(
|
|
||||||
margin: EdgeInsets.only(right: 12, top: 8, bottom: 8),
|
|
||||||
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 8),
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
color: isSelected ? AppColor.primary : AppColor.white,
|
|
||||||
borderRadius: BorderRadius.circular(25),
|
|
||||||
border: Border.all(
|
|
||||||
color: isSelected ? AppColor.primary : AppColor.border,
|
|
||||||
width: 1,
|
|
||||||
),
|
),
|
||||||
),
|
child: Column(
|
||||||
child: Text(
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
filter,
|
|
||||||
style: TextStyle(
|
|
||||||
color: isSelected ? AppColor.white : AppColor.textSecondary,
|
|
||||||
fontWeight: FontWeight.w600,
|
|
||||||
fontSize: 14,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
},
|
|
||||||
),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
Widget _buildTransactionList() {
|
|
||||||
final filteredTransactions = transactions.where((transaction) {
|
|
||||||
if (selectedFilter == 'All') return true;
|
|
||||||
return transaction.status == selectedFilter;
|
|
||||||
}).toList();
|
|
||||||
|
|
||||||
return ListView.builder(
|
|
||||||
padding: EdgeInsets.symmetric(horizontal: 16),
|
|
||||||
itemCount: filteredTransactions.length,
|
|
||||||
itemBuilder: (context, index) {
|
|
||||||
final transaction = filteredTransactions[index];
|
|
||||||
return _buildTransactionCard(transaction);
|
|
||||||
},
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
Widget _buildTransactionCard(Transaction transaction) {
|
|
||||||
return GestureDetector(
|
|
||||||
onTap: () => _showTransactionDetail(transaction),
|
|
||||||
child: Container(
|
|
||||||
margin: EdgeInsets.only(bottom: 12),
|
|
||||||
padding: EdgeInsets.all(16),
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
color: AppColor.white,
|
|
||||||
borderRadius: BorderRadius.circular(12),
|
|
||||||
boxShadow: [
|
|
||||||
BoxShadow(
|
|
||||||
color: AppColor.black.withOpacity(0.05),
|
|
||||||
blurRadius: 10,
|
|
||||||
offset: Offset(0, 2),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
child: Column(
|
|
||||||
children: [
|
|
||||||
Row(
|
|
||||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
||||||
children: [
|
|
||||||
Expanded(
|
|
||||||
child: Column(
|
|
||||||
crossAxisAlignment: CrossAxisAlignment.start,
|
|
||||||
children: [
|
|
||||||
Text(
|
|
||||||
transaction.id,
|
|
||||||
style: TextStyle(
|
|
||||||
color: AppColor.textPrimary,
|
|
||||||
fontSize: 16,
|
|
||||||
fontWeight: FontWeight.bold,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
SizedBox(height: 4),
|
|
||||||
Text(
|
|
||||||
transaction.customerName,
|
|
||||||
style: TextStyle(
|
|
||||||
color: AppColor.textSecondary,
|
|
||||||
fontSize: 14,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
SizedBox(height: 4),
|
|
||||||
Text(
|
|
||||||
'${_formatTime(transaction.date)} • ${transaction.paymentMethod}',
|
|
||||||
style: TextStyle(
|
|
||||||
color: AppColor.textLight,
|
|
||||||
fontSize: 12,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
),
|
|
||||||
Column(
|
|
||||||
crossAxisAlignment: CrossAxisAlignment.end,
|
|
||||||
children: [
|
children: [
|
||||||
Text(
|
SingleChildScrollView(
|
||||||
'Rp ${_formatCurrency(transaction.total)}',
|
scrollDirection: Axis.horizontal,
|
||||||
style: TextStyle(
|
child: Row(
|
||||||
color: AppColor.textPrimary,
|
children: filterOptions.map((option) {
|
||||||
fontSize: 16,
|
final index = filterOptions.indexOf(option);
|
||||||
fontWeight: FontWeight.bold,
|
return Padding(
|
||||||
),
|
padding: EdgeInsets.only(
|
||||||
),
|
right: index < filterOptions.length - 1 ? 8 : 0,
|
||||||
SizedBox(height: 8),
|
),
|
||||||
Container(
|
child: TransactionStatusTile(
|
||||||
padding: EdgeInsets.symmetric(
|
label: option,
|
||||||
horizontal: 12,
|
isSelected: option == selectedFilter,
|
||||||
vertical: 6,
|
onSelected: (isSelected) {
|
||||||
),
|
if (isSelected) {
|
||||||
decoration: BoxDecoration(
|
setState(() {
|
||||||
color: _getStatusColor(
|
selectedFilter = option;
|
||||||
transaction.status,
|
});
|
||||||
).withOpacity(0.1),
|
}
|
||||||
borderRadius: BorderRadius.circular(20),
|
},
|
||||||
),
|
),
|
||||||
child: Text(
|
);
|
||||||
transaction.status,
|
}).toList(),
|
||||||
style: TextStyle(
|
|
||||||
color: _getStatusColor(transaction.status),
|
|
||||||
fontSize: 12,
|
|
||||||
fontWeight: FontWeight.w600,
|
|
||||||
),
|
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
],
|
|
||||||
),
|
|
||||||
SizedBox(height: 12),
|
|
||||||
Row(
|
|
||||||
children: [
|
|
||||||
Icon(
|
|
||||||
Icons.shopping_bag_outlined,
|
|
||||||
color: AppColor.textLight,
|
|
||||||
size: 16,
|
|
||||||
),
|
|
||||||
SizedBox(width: 8),
|
|
||||||
Text(
|
|
||||||
'${transaction.items.length} items',
|
|
||||||
style: TextStyle(color: AppColor.textLight, fontSize: 12),
|
|
||||||
),
|
|
||||||
Spacer(),
|
|
||||||
Icon(
|
|
||||||
Icons.arrow_forward_ios,
|
|
||||||
color: AppColor.textLight,
|
|
||||||
size: 14,
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
Color _getStatusColor(String status) {
|
|
||||||
switch (status) {
|
|
||||||
case 'Completed':
|
|
||||||
return AppColor.success;
|
|
||||||
case 'Pending':
|
|
||||||
return AppColor.warning;
|
|
||||||
case 'Cancelled':
|
|
||||||
return AppColor.error;
|
|
||||||
default:
|
|
||||||
return AppColor.textSecondary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
String _formatCurrency(double amount) {
|
|
||||||
return amount
|
|
||||||
.toStringAsFixed(0)
|
|
||||||
.replaceAllMapped(
|
|
||||||
RegExp(r'(\d{1,3})(?=(\d{3})+(?!\d))'),
|
|
||||||
(Match m) => '${m[1]},',
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
String _formatTime(DateTime dateTime) {
|
|
||||||
final now = DateTime.now();
|
|
||||||
final difference = now.difference(dateTime);
|
|
||||||
|
|
||||||
if (difference.inHours < 1) {
|
|
||||||
return '${difference.inMinutes}m ago';
|
|
||||||
} else if (difference.inHours < 24) {
|
|
||||||
return '${difference.inHours}h ago';
|
|
||||||
} else {
|
|
||||||
return '${difference.inDays}d ago';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
void _showFilterBottomSheet(BuildContext context) {
|
|
||||||
showModalBottomSheet(
|
|
||||||
context: context,
|
|
||||||
shape: RoundedRectangleBorder(
|
|
||||||
borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
|
|
||||||
),
|
|
||||||
builder: (context) {
|
|
||||||
return Container(
|
|
||||||
padding: EdgeInsets.all(20),
|
|
||||||
child: Column(
|
|
||||||
mainAxisSize: MainAxisSize.min,
|
|
||||||
crossAxisAlignment: CrossAxisAlignment.start,
|
|
||||||
children: [
|
|
||||||
Text(
|
|
||||||
'Filter Transactions',
|
|
||||||
style: TextStyle(
|
|
||||||
fontSize: 18,
|
|
||||||
fontWeight: FontWeight.bold,
|
|
||||||
color: AppColor.textPrimary,
|
|
||||||
),
|
|
||||||
),
|
),
|
||||||
SizedBox(height: 20),
|
),
|
||||||
_buildFilterOption('Date Range', Icons.date_range),
|
|
||||||
_buildFilterOption('Payment Method', Icons.payment),
|
|
||||||
_buildFilterOption('Amount Range', Icons.attach_money),
|
|
||||||
_buildFilterOption('Customer', Icons.person),
|
|
||||||
SizedBox(height: 20),
|
|
||||||
Row(
|
|
||||||
children: [
|
|
||||||
Expanded(
|
|
||||||
child: OutlinedButton(
|
|
||||||
onPressed: () => Navigator.pop(context),
|
|
||||||
style: OutlinedButton.styleFrom(
|
|
||||||
side: BorderSide(color: AppColor.border),
|
|
||||||
padding: EdgeInsets.symmetric(vertical: 12),
|
|
||||||
),
|
|
||||||
child: Text(
|
|
||||||
'Reset',
|
|
||||||
style: TextStyle(color: AppColor.textSecondary),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
SizedBox(width: 12),
|
|
||||||
Expanded(
|
|
||||||
child: ElevatedButton(
|
|
||||||
onPressed: () => Navigator.pop(context),
|
|
||||||
style: ElevatedButton.styleFrom(
|
|
||||||
backgroundColor: AppColor.primary,
|
|
||||||
padding: EdgeInsets.symmetric(vertical: 12),
|
|
||||||
),
|
|
||||||
child: Text(
|
|
||||||
'Apply',
|
|
||||||
style: TextStyle(color: AppColor.white),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
),
|
||||||
);
|
|
||||||
},
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
Widget _buildFilterOption(String title, IconData icon) {
|
// Content
|
||||||
return ListTile(
|
SliverPadding(
|
||||||
contentPadding: EdgeInsets.zero,
|
padding: EdgeInsets.all(AppValue.padding),
|
||||||
leading: Icon(icon, color: AppColor.textSecondary),
|
sliver: SliverList(
|
||||||
title: Text(title, style: TextStyle(color: AppColor.textPrimary)),
|
delegate: SliverChildListDelegate([
|
||||||
trailing: Icon(
|
FadeTransition(
|
||||||
Icons.arrow_forward_ios,
|
opacity: _fadeAnimation,
|
||||||
size: 16,
|
child: SlideTransition(
|
||||||
color: AppColor.textLight,
|
position: _slideAnimation,
|
||||||
),
|
child: Column(
|
||||||
onTap: () {},
|
children: [
|
||||||
);
|
// Show filtered transaction count
|
||||||
}
|
if (selectedFilter != 'All')
|
||||||
|
Padding(
|
||||||
|
padding: const EdgeInsets.only(bottom: 16),
|
||||||
|
child: Row(
|
||||||
|
children: [
|
||||||
|
Text(
|
||||||
|
'${filteredTransactions.length} ${selectedFilter.toLowerCase()} transaction${filteredTransactions.length != 1 ? 's' : ''}',
|
||||||
|
style: TextStyle(
|
||||||
|
color: AppColor.textSecondary,
|
||||||
|
fontSize: 14,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
|
||||||
void _showTransactionDetail(Transaction transaction) {
|
// Transaction List
|
||||||
showModalBottomSheet(
|
filteredTransactions.isEmpty
|
||||||
context: context,
|
? Container(
|
||||||
isScrollControlled: true,
|
padding: const EdgeInsets.symmetric(
|
||||||
shape: RoundedRectangleBorder(
|
vertical: 40,
|
||||||
borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
|
),
|
||||||
),
|
|
||||||
builder: (context) {
|
|
||||||
return DraggableScrollableSheet(
|
|
||||||
initialChildSize: 0.7,
|
|
||||||
maxChildSize: 0.9,
|
|
||||||
minChildSize: 0.5,
|
|
||||||
builder: (context, scrollController) {
|
|
||||||
return Container(
|
|
||||||
padding: EdgeInsets.all(20),
|
|
||||||
child: Column(
|
|
||||||
crossAxisAlignment: CrossAxisAlignment.start,
|
|
||||||
children: [
|
|
||||||
Center(
|
|
||||||
child: Container(
|
|
||||||
width: 40,
|
|
||||||
height: 4,
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
color: AppColor.borderLight,
|
|
||||||
borderRadius: BorderRadius.circular(2),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
SizedBox(height: 20),
|
|
||||||
Row(
|
|
||||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
||||||
children: [
|
|
||||||
Text(
|
|
||||||
'Transaction Detail',
|
|
||||||
style: TextStyle(
|
|
||||||
fontSize: 18,
|
|
||||||
fontWeight: FontWeight.bold,
|
|
||||||
color: AppColor.textPrimary,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
Container(
|
|
||||||
padding: EdgeInsets.symmetric(
|
|
||||||
horizontal: 12,
|
|
||||||
vertical: 6,
|
|
||||||
),
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
color: _getStatusColor(
|
|
||||||
transaction.status,
|
|
||||||
).withOpacity(0.1),
|
|
||||||
borderRadius: BorderRadius.circular(20),
|
|
||||||
),
|
|
||||||
child: Text(
|
|
||||||
transaction.status,
|
|
||||||
style: TextStyle(
|
|
||||||
color: _getStatusColor(transaction.status),
|
|
||||||
fontSize: 12,
|
|
||||||
fontWeight: FontWeight.w600,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
SizedBox(height: 20),
|
|
||||||
_buildDetailRow('Transaction ID', transaction.id),
|
|
||||||
_buildDetailRow('Customer', transaction.customerName),
|
|
||||||
_buildDetailRow(
|
|
||||||
'Date',
|
|
||||||
'${transaction.date.day}/${transaction.date.month}/${transaction.date.year}',
|
|
||||||
),
|
|
||||||
_buildDetailRow('Payment Method', transaction.paymentMethod),
|
|
||||||
SizedBox(height: 20),
|
|
||||||
Text(
|
|
||||||
'Items Ordered',
|
|
||||||
style: TextStyle(
|
|
||||||
fontSize: 16,
|
|
||||||
fontWeight: FontWeight.bold,
|
|
||||||
color: AppColor.textPrimary,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
SizedBox(height: 12),
|
|
||||||
Expanded(
|
|
||||||
child: ListView.builder(
|
|
||||||
controller: scrollController,
|
|
||||||
itemCount: transaction.items.length,
|
|
||||||
itemBuilder: (context, index) {
|
|
||||||
final item = transaction.items[index];
|
|
||||||
return Container(
|
|
||||||
margin: EdgeInsets.only(bottom: 8),
|
|
||||||
padding: EdgeInsets.all(12),
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
color: AppColor.backgroundLight,
|
|
||||||
borderRadius: BorderRadius.circular(8),
|
|
||||||
),
|
|
||||||
child: Row(
|
|
||||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
||||||
children: [
|
|
||||||
Expanded(
|
|
||||||
child: Column(
|
child: Column(
|
||||||
crossAxisAlignment: CrossAxisAlignment.start,
|
|
||||||
children: [
|
children: [
|
||||||
Text(
|
Icon(
|
||||||
item.name,
|
LineIcons.receipt,
|
||||||
style: TextStyle(
|
size: 64,
|
||||||
color: AppColor.textPrimary,
|
color: AppColor.textSecondary.withOpacity(
|
||||||
fontWeight: FontWeight.w600,
|
0.5,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
const SizedBox(height: 16),
|
||||||
Text(
|
Text(
|
||||||
'Qty: ${item.quantity}',
|
'No ${selectedFilter.toLowerCase()} transactions found',
|
||||||
style: TextStyle(
|
style: TextStyle(
|
||||||
color: AppColor.textSecondary,
|
color: AppColor.textSecondary,
|
||||||
fontSize: 12,
|
fontSize: 16,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
|
)
|
||||||
|
: Column(
|
||||||
|
children: filteredTransactions.map((
|
||||||
|
transaction,
|
||||||
|
) {
|
||||||
|
return TransactionTile(
|
||||||
|
transaction: transaction,
|
||||||
|
onTap: () {},
|
||||||
|
);
|
||||||
|
}).toList(),
|
||||||
),
|
),
|
||||||
Text(
|
|
||||||
'Rp ${_formatCurrency(item.price * item.quantity)}',
|
|
||||||
style: TextStyle(
|
|
||||||
color: AppColor.textPrimary,
|
|
||||||
fontWeight: FontWeight.bold,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
);
|
|
||||||
},
|
|
||||||
),
|
|
||||||
),
|
|
||||||
Container(
|
|
||||||
padding: EdgeInsets.symmetric(vertical: 16),
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
border: Border(top: BorderSide(color: AppColor.border)),
|
|
||||||
),
|
|
||||||
child: Row(
|
|
||||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
||||||
children: [
|
|
||||||
Text(
|
|
||||||
'Total Amount',
|
|
||||||
style: TextStyle(
|
|
||||||
fontSize: 18,
|
|
||||||
fontWeight: FontWeight.bold,
|
|
||||||
color: AppColor.textPrimary,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
Text(
|
|
||||||
'Rp ${_formatCurrency(transaction.total)}',
|
|
||||||
style: TextStyle(
|
|
||||||
fontSize: 18,
|
|
||||||
fontWeight: FontWeight.bold,
|
|
||||||
color: AppColor.primary,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
],
|
),
|
||||||
),
|
]),
|
||||||
);
|
|
||||||
},
|
|
||||||
);
|
|
||||||
},
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
Widget _buildDetailRow(String label, String value) {
|
|
||||||
return Padding(
|
|
||||||
padding: EdgeInsets.symmetric(vertical: 8),
|
|
||||||
child: Row(
|
|
||||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
||||||
children: [
|
|
||||||
Text(
|
|
||||||
label,
|
|
||||||
style: TextStyle(color: AppColor.textSecondary, fontSize: 14),
|
|
||||||
),
|
|
||||||
Text(
|
|
||||||
value,
|
|
||||||
style: TextStyle(
|
|
||||||
color: AppColor.textPrimary,
|
|
||||||
fontSize: 14,
|
|
||||||
fontWeight: FontWeight.w600,
|
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
@ -709,3 +284,30 @@ class _TransactionPageState extends State<TransactionPage> {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Custom delegate for pinned filter header
|
||||||
|
class _FilterHeaderDelegate extends SliverPersistentHeaderDelegate {
|
||||||
|
final Widget child;
|
||||||
|
|
||||||
|
_FilterHeaderDelegate({required this.child});
|
||||||
|
|
||||||
|
@override
|
||||||
|
double get minExtent => 70; // Minimum height when collapsed
|
||||||
|
|
||||||
|
@override
|
||||||
|
double get maxExtent => 70; // Maximum height when expanded
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(
|
||||||
|
BuildContext context,
|
||||||
|
double shrinkOffset,
|
||||||
|
bool overlapsContent,
|
||||||
|
) {
|
||||||
|
return child;
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
97
lib/presentation/pages/transaction/widgets/appbar.dart
Normal file
97
lib/presentation/pages/transaction/widgets/appbar.dart
Normal file
@ -0,0 +1,97 @@
|
|||||||
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
|
import '../../../../common/theme/theme.dart';
|
||||||
|
|
||||||
|
class TransactionAppBar extends StatelessWidget {
|
||||||
|
final Animation<double> rotationAnimation;
|
||||||
|
const TransactionAppBar({super.key, required this.rotationAnimation});
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return FlexibleSpaceBar(
|
||||||
|
titlePadding: const EdgeInsets.only(left: 20, bottom: 16),
|
||||||
|
title: Text(
|
||||||
|
'Transaksi',
|
||||||
|
style: AppStyle.xl.copyWith(
|
||||||
|
color: AppColor.textWhite,
|
||||||
|
fontSize: 18,
|
||||||
|
fontWeight: FontWeight.w600,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
|
||||||
|
background: Container(
|
||||||
|
decoration: const BoxDecoration(
|
||||||
|
gradient: LinearGradient(
|
||||||
|
colors: AppColor.primaryGradient,
|
||||||
|
begin: Alignment.topCenter,
|
||||||
|
end: Alignment.bottomCenter,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
child: Stack(
|
||||||
|
children: [
|
||||||
|
Positioned(
|
||||||
|
right: -20,
|
||||||
|
top: -20,
|
||||||
|
child: AnimatedBuilder(
|
||||||
|
animation: rotationAnimation,
|
||||||
|
builder: (context, child) {
|
||||||
|
return Transform.rotate(
|
||||||
|
angle: rotationAnimation.value,
|
||||||
|
child: Container(
|
||||||
|
width: 100,
|
||||||
|
height: 100,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
shape: BoxShape.circle,
|
||||||
|
color: AppColor.white.withOpacity(0.1),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
),
|
||||||
|
),
|
||||||
|
Positioned(
|
||||||
|
left: -30,
|
||||||
|
bottom: -30,
|
||||||
|
child: AnimatedBuilder(
|
||||||
|
animation: rotationAnimation,
|
||||||
|
builder: (context, child) {
|
||||||
|
return Transform.rotate(
|
||||||
|
angle: -rotationAnimation.value * 0.5,
|
||||||
|
child: Container(
|
||||||
|
width: 80,
|
||||||
|
height: 80,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
shape: BoxShape.circle,
|
||||||
|
color: AppColor.white.withOpacity(0.05),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
),
|
||||||
|
),
|
||||||
|
Positioned(
|
||||||
|
right: 80,
|
||||||
|
bottom: 30,
|
||||||
|
child: AnimatedBuilder(
|
||||||
|
animation: rotationAnimation,
|
||||||
|
builder: (context, child) {
|
||||||
|
return Transform.rotate(
|
||||||
|
angle: -rotationAnimation.value * 0.2,
|
||||||
|
child: Container(
|
||||||
|
width: 40,
|
||||||
|
height: 40,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
borderRadius: BorderRadius.circular(8),
|
||||||
|
color: AppColor.white.withOpacity(0.08),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
39
lib/presentation/pages/transaction/widgets/status_tile.dart
Normal file
39
lib/presentation/pages/transaction/widgets/status_tile.dart
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
|
import '../../../../common/theme/theme.dart';
|
||||||
|
|
||||||
|
class TransactionStatusTile extends StatelessWidget {
|
||||||
|
final String label;
|
||||||
|
final bool isSelected;
|
||||||
|
final void Function(bool)? onSelected;
|
||||||
|
const TransactionStatusTile({
|
||||||
|
super.key,
|
||||||
|
required this.label,
|
||||||
|
this.isSelected = false,
|
||||||
|
this.onSelected,
|
||||||
|
});
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return FilterChip(
|
||||||
|
label: Text(
|
||||||
|
label,
|
||||||
|
style: TextStyle(
|
||||||
|
color: isSelected ? Colors.white : AppColor.primary,
|
||||||
|
fontWeight: isSelected ? FontWeight.w600 : FontWeight.normal,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
selected: isSelected,
|
||||||
|
onSelected: onSelected,
|
||||||
|
backgroundColor: Colors.white,
|
||||||
|
selectedColor: AppColor.primary,
|
||||||
|
checkmarkColor: Colors.white,
|
||||||
|
side: BorderSide(
|
||||||
|
color: isSelected ? AppColor.primary : Colors.grey.shade300,
|
||||||
|
width: 1,
|
||||||
|
),
|
||||||
|
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
|
||||||
|
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
401
lib/presentation/pages/transaction/widgets/transaction_tile.dart
Normal file
401
lib/presentation/pages/transaction/widgets/transaction_tile.dart
Normal file
@ -0,0 +1,401 @@
|
|||||||
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:intl/intl.dart';
|
||||||
|
|
||||||
|
import '../../../../common/theme/theme.dart';
|
||||||
|
|
||||||
|
// Model untuk Transaction
|
||||||
|
class Transaction {
|
||||||
|
final String id;
|
||||||
|
final String customerName;
|
||||||
|
final DateTime date;
|
||||||
|
final double totalAmount;
|
||||||
|
final int itemCount;
|
||||||
|
final String paymentMethod;
|
||||||
|
final TransactionStatus status;
|
||||||
|
final String? receiptNumber;
|
||||||
|
|
||||||
|
Transaction({
|
||||||
|
required this.id,
|
||||||
|
required this.customerName,
|
||||||
|
required this.date,
|
||||||
|
required this.totalAmount,
|
||||||
|
required this.itemCount,
|
||||||
|
required this.paymentMethod,
|
||||||
|
required this.status,
|
||||||
|
this.receiptNumber,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
enum TransactionStatus { completed, pending, cancelled, refunded }
|
||||||
|
|
||||||
|
class TransactionTile extends StatelessWidget {
|
||||||
|
final Transaction transaction;
|
||||||
|
final VoidCallback? onTap;
|
||||||
|
final VoidCallback? onPrint;
|
||||||
|
final VoidCallback? onRefund;
|
||||||
|
|
||||||
|
const TransactionTile({
|
||||||
|
super.key,
|
||||||
|
required this.transaction,
|
||||||
|
this.onTap,
|
||||||
|
this.onPrint,
|
||||||
|
this.onRefund,
|
||||||
|
});
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return Container(
|
||||||
|
margin: const EdgeInsets.only(bottom: 16),
|
||||||
|
child: Card(
|
||||||
|
elevation: 4,
|
||||||
|
shadowColor: AppColor.primaryWithOpacity(0.1),
|
||||||
|
shape: RoundedRectangleBorder(
|
||||||
|
borderRadius: BorderRadius.circular(16),
|
||||||
|
side: BorderSide(color: AppColor.border, width: 0.5),
|
||||||
|
),
|
||||||
|
child: InkWell(
|
||||||
|
onTap: onTap,
|
||||||
|
borderRadius: BorderRadius.circular(16),
|
||||||
|
child: Container(
|
||||||
|
padding: const EdgeInsets.all(16),
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
borderRadius: BorderRadius.circular(16),
|
||||||
|
gradient: LinearGradient(
|
||||||
|
begin: Alignment.topLeft,
|
||||||
|
end: Alignment.bottomRight,
|
||||||
|
colors: [AppColor.backgroundLight, AppColor.background],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
child: Column(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
|
children: [
|
||||||
|
// Header Row
|
||||||
|
_buildHeaderRow(),
|
||||||
|
const SizedBox(height: 12),
|
||||||
|
|
||||||
|
// Transaction Info
|
||||||
|
_buildTransactionInfo(),
|
||||||
|
const SizedBox(height: 16),
|
||||||
|
|
||||||
|
// Amount Section
|
||||||
|
_buildAmountSection(),
|
||||||
|
const SizedBox(height: 16),
|
||||||
|
|
||||||
|
// Footer with Actions
|
||||||
|
_buildFooterActions(),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Widget _buildHeaderRow() {
|
||||||
|
return Row(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||||
|
children: [
|
||||||
|
Column(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
|
children: [
|
||||||
|
Text(
|
||||||
|
transaction.receiptNumber ?? 'TXN-${transaction.id}',
|
||||||
|
style: const TextStyle(
|
||||||
|
fontSize: 16,
|
||||||
|
fontWeight: FontWeight.bold,
|
||||||
|
color: AppColor.textPrimary,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const SizedBox(height: 2),
|
||||||
|
Text(
|
||||||
|
DateFormat('dd MMM yyyy, HH:mm').format(transaction.date),
|
||||||
|
style: const TextStyle(
|
||||||
|
fontSize: 12,
|
||||||
|
color: AppColor.textSecondary,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
_buildStatusChip(),
|
||||||
|
],
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Widget _buildStatusChip() {
|
||||||
|
Color statusColor;
|
||||||
|
String statusText;
|
||||||
|
IconData statusIcon;
|
||||||
|
|
||||||
|
switch (transaction.status) {
|
||||||
|
case TransactionStatus.completed:
|
||||||
|
statusColor = AppColor.success;
|
||||||
|
statusText = 'Completed';
|
||||||
|
statusIcon = Icons.check_circle;
|
||||||
|
break;
|
||||||
|
case TransactionStatus.pending:
|
||||||
|
statusColor = AppColor.warning;
|
||||||
|
statusText = 'Pending';
|
||||||
|
statusIcon = Icons.schedule;
|
||||||
|
break;
|
||||||
|
case TransactionStatus.cancelled:
|
||||||
|
statusColor = AppColor.error;
|
||||||
|
statusText = 'Cancelled';
|
||||||
|
statusIcon = Icons.cancel;
|
||||||
|
break;
|
||||||
|
case TransactionStatus.refunded:
|
||||||
|
statusColor = AppColor.info;
|
||||||
|
statusText = 'Refunded';
|
||||||
|
statusIcon = Icons.undo;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
return Container(
|
||||||
|
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: statusColor.withOpacity(0.1),
|
||||||
|
borderRadius: BorderRadius.circular(20),
|
||||||
|
border: Border.all(color: statusColor.withOpacity(0.3), width: 1),
|
||||||
|
),
|
||||||
|
child: Row(
|
||||||
|
mainAxisSize: MainAxisSize.min,
|
||||||
|
children: [
|
||||||
|
Icon(statusIcon, size: 14, color: statusColor),
|
||||||
|
const SizedBox(width: 4),
|
||||||
|
Text(
|
||||||
|
statusText,
|
||||||
|
style: TextStyle(
|
||||||
|
fontSize: 12,
|
||||||
|
fontWeight: FontWeight.w600,
|
||||||
|
color: statusColor,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Widget _buildTransactionInfo() {
|
||||||
|
return Row(
|
||||||
|
children: [
|
||||||
|
Expanded(
|
||||||
|
flex: 2,
|
||||||
|
child: Column(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
|
children: [
|
||||||
|
Row(
|
||||||
|
children: [
|
||||||
|
Icon(Icons.person_outline, size: 16, color: AppColor.primary),
|
||||||
|
const SizedBox(width: 6),
|
||||||
|
Expanded(
|
||||||
|
child: Text(
|
||||||
|
transaction.customerName,
|
||||||
|
style: const TextStyle(
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: FontWeight.w600,
|
||||||
|
color: AppColor.textPrimary,
|
||||||
|
),
|
||||||
|
overflow: TextOverflow.ellipsis,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
const SizedBox(height: 8),
|
||||||
|
Row(
|
||||||
|
children: [
|
||||||
|
Icon(
|
||||||
|
Icons.shopping_bag_outlined,
|
||||||
|
size: 16,
|
||||||
|
color: AppColor.primary,
|
||||||
|
),
|
||||||
|
const SizedBox(width: 6),
|
||||||
|
Text(
|
||||||
|
'${transaction.itemCount} items',
|
||||||
|
style: const TextStyle(
|
||||||
|
fontSize: 13,
|
||||||
|
color: AppColor.textSecondary,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
Container(
|
||||||
|
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: AppColor.primaryWithOpacity(0.1),
|
||||||
|
borderRadius: BorderRadius.circular(12),
|
||||||
|
),
|
||||||
|
child: Row(
|
||||||
|
mainAxisSize: MainAxisSize.min,
|
||||||
|
children: [
|
||||||
|
Icon(
|
||||||
|
_getPaymentIcon(transaction.paymentMethod),
|
||||||
|
size: 16,
|
||||||
|
color: AppColor.primary,
|
||||||
|
),
|
||||||
|
const SizedBox(width: 6),
|
||||||
|
Text(
|
||||||
|
transaction.paymentMethod,
|
||||||
|
style: const TextStyle(
|
||||||
|
fontSize: 12,
|
||||||
|
fontWeight: FontWeight.w500,
|
||||||
|
color: AppColor.primary,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Widget _buildAmountSection() {
|
||||||
|
return Container(
|
||||||
|
width: double.infinity,
|
||||||
|
padding: const EdgeInsets.all(16),
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
gradient: LinearGradient(
|
||||||
|
begin: Alignment.topLeft,
|
||||||
|
end: Alignment.bottomRight,
|
||||||
|
colors: AppColor.primaryGradient,
|
||||||
|
),
|
||||||
|
borderRadius: BorderRadius.circular(12),
|
||||||
|
boxShadow: [
|
||||||
|
BoxShadow(
|
||||||
|
color: AppColor.primary.withOpacity(0.2),
|
||||||
|
blurRadius: 8,
|
||||||
|
offset: const Offset(0, 4),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
child: Row(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||||
|
children: [
|
||||||
|
Column(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
|
children: [
|
||||||
|
const Text(
|
||||||
|
'Total Amount',
|
||||||
|
style: TextStyle(
|
||||||
|
fontSize: 14,
|
||||||
|
color: AppColor.textWhite,
|
||||||
|
fontWeight: FontWeight.w500,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const SizedBox(height: 4),
|
||||||
|
Text(
|
||||||
|
'Rp ${NumberFormat('#,###').format(transaction.totalAmount)}',
|
||||||
|
style: const TextStyle(
|
||||||
|
fontSize: 24,
|
||||||
|
fontWeight: FontWeight.bold,
|
||||||
|
color: AppColor.textWhite,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
Container(
|
||||||
|
padding: const EdgeInsets.all(12),
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: AppColor.backgroundLight.withOpacity(0.2),
|
||||||
|
shape: BoxShape.circle,
|
||||||
|
),
|
||||||
|
child: const Icon(
|
||||||
|
Icons.attach_money,
|
||||||
|
color: AppColor.textWhite,
|
||||||
|
size: 24,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Widget _buildFooterActions() {
|
||||||
|
return Row(
|
||||||
|
children: [
|
||||||
|
Expanded(
|
||||||
|
child: Text(
|
||||||
|
'ID: ${transaction.id}',
|
||||||
|
style: const TextStyle(
|
||||||
|
fontSize: 11,
|
||||||
|
color: AppColor.textLight,
|
||||||
|
fontWeight: FontWeight.w500,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
if (transaction.status == TransactionStatus.completed) ...[
|
||||||
|
_buildActionButton(
|
||||||
|
icon: Icons.print,
|
||||||
|
label: 'Print',
|
||||||
|
onPressed: onPrint,
|
||||||
|
color: AppColor.info,
|
||||||
|
),
|
||||||
|
const SizedBox(width: 8),
|
||||||
|
_buildActionButton(
|
||||||
|
icon: Icons.undo,
|
||||||
|
label: 'Refund',
|
||||||
|
onPressed: onRefund,
|
||||||
|
color: AppColor.warning,
|
||||||
|
),
|
||||||
|
],
|
||||||
|
],
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Widget _buildActionButton({
|
||||||
|
required IconData icon,
|
||||||
|
required String label,
|
||||||
|
required VoidCallback? onPressed,
|
||||||
|
required Color color,
|
||||||
|
}) {
|
||||||
|
return Material(
|
||||||
|
color: color.withOpacity(0.1),
|
||||||
|
borderRadius: BorderRadius.circular(8),
|
||||||
|
child: InkWell(
|
||||||
|
onTap: onPressed,
|
||||||
|
borderRadius: BorderRadius.circular(8),
|
||||||
|
child: Container(
|
||||||
|
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
|
||||||
|
child: Row(
|
||||||
|
mainAxisSize: MainAxisSize.min,
|
||||||
|
children: [
|
||||||
|
Icon(icon, size: 16, color: color),
|
||||||
|
const SizedBox(width: 4),
|
||||||
|
Text(
|
||||||
|
label,
|
||||||
|
style: TextStyle(
|
||||||
|
fontSize: 12,
|
||||||
|
fontWeight: FontWeight.w600,
|
||||||
|
color: color,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
IconData _getPaymentIcon(String paymentMethod) {
|
||||||
|
switch (paymentMethod.toLowerCase()) {
|
||||||
|
case 'cash':
|
||||||
|
return Icons.payments;
|
||||||
|
case 'card':
|
||||||
|
case 'credit card':
|
||||||
|
case 'debit card':
|
||||||
|
return Icons.credit_card;
|
||||||
|
case 'qris':
|
||||||
|
case 'qr code':
|
||||||
|
return Icons.qr_code;
|
||||||
|
case 'transfer':
|
||||||
|
case 'bank transfer':
|
||||||
|
return Icons.account_balance;
|
||||||
|
case 'e-wallet':
|
||||||
|
case 'digital wallet':
|
||||||
|
return Icons.account_balance_wallet;
|
||||||
|
default:
|
||||||
|
return Icons.payment;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user