apksel-dev/apskel-owner-flutter
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: change name transaction to order

Browse Source
This commit is contained in:
efrilm
2025-08-18 13:33:45 +07:00
parent b8055c8eab
commit 62eb15b27f
8 changed files with 54 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/presentation/pages/order/order_page.dart
+295
View File
@@ -0,0 +1,295 @@
import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:line_icons/line_icons.dart';
import '../../../common/theme/theme.dart';
import '../../components/appbar/appbar.dart';
import '../../components/button/button.dart';
import '../../components/spacer/spacer.dart';
import 'widgets/status_tile.dart';
import 'widgets/order_tile.dart';
@RoutePage()
class OrderPage extends StatefulWidget {
const OrderPage({super.key});
@override
State<OrderPage> createState() => _OrderPageState();
}
class _OrderPageState extends State<OrderPage> with TickerProviderStateMixin {
late AnimationController _fadeController;
late AnimationController _slideController;
late Animation<double> _fadeAnimation;
late Animation<Offset> _slideAnimation;
// 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,
);
_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),
);
_fadeController.forward();
_slideController.forward();
}
@override
void dispose() {
_fadeController.dispose();
_slideController.dispose();
super.dispose();
}
final sampleTransactions = [
Transaction(
id: 'TXN001',
customerName: 'John Doe',
date: DateTime.now().subtract(const Duration(hours: 2)),
totalAmount: 125000,
itemCount: 3,
paymentMethod: 'Cash',
status: TransactionStatus.completed,
receiptNumber: 'RCP-2024-001',
),
Transaction(
id: 'TXN002',
customerName: 'Jane Smith',
date: DateTime.now().subtract(const Duration(hours: 5)),
totalAmount: 87500,
itemCount: 2,
paymentMethod: 'QRIS',
status: TransactionStatus.pending,
receiptNumber: 'RCP-2024-002',
),
Transaction(
id: 'TXN003',
customerName: 'Bob Johnson',
date: DateTime.now().subtract(const Duration(days: 1)),
totalAmount: 250000,
itemCount: 5,
paymentMethod: 'Credit Card',
status: TransactionStatus.refunded,
receiptNumber: 'RCP-2024-003',
),
];
// 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
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: AppColor.background,
body: CustomScrollView(
slivers: [
// Custom App Bar with Hero Effect
SliverAppBar(
expandedHeight: 120,
floating: true,
pinned: true,
backgroundColor: AppColor.primary,
centerTitle: false,
flexibleSpace: CustomAppBar(title: 'Order', isBack: false),
actions: [
ActionIconButton(onTap: () {}, icon: LineIcons.filter),
SpaceWidth(8),
],
),
// Pinned Filter Section
SliverPersistentHeader(
pinned: true,
delegate: _FilterHeaderDelegate(
child: Container(
color: AppColor.background,
padding: EdgeInsets.fromLTRB(
AppValue.padding,
10,
AppValue.padding,
10,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: filterOptions.map((option) {
final index = filterOptions.indexOf(option);
return Padding(
padding: EdgeInsets.only(
right: index < filterOptions.length - 1 ? 8 : 0,
),
child: OrderStatusTile(
label: option,
isSelected: option == selectedFilter,
onSelected: (isSelected) {
if (isSelected) {
setState(() {
selectedFilter = option;
});
}
},
),
);
}).toList(),
),
),
],
),
),
),
),
// Content
SliverPadding(
padding: EdgeInsets.all(AppValue.padding),
sliver: SliverList(
delegate: SliverChildListDelegate([
FadeTransition(
opacity: _fadeAnimation,
child: SlideTransition(
position: _slideAnimation,
child: Column(
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,
),
),
],
),
),
// Transaction List
filteredTransactions.isEmpty
? Container(
padding: const EdgeInsets.symmetric(
vertical: 40,
),
child: Column(
children: [
Icon(
LineIcons.receipt,
size: 64,
color: AppColor.textSecondary.withOpacity(
0.5,
),
),
const SizedBox(height: 16),
Text(
'No ${selectedFilter.toLowerCase()} transactions found',
style: TextStyle(
color: AppColor.textSecondary,
fontSize: 16,
),
),
],
),
)
: Column(
children: filteredTransactions.map((
transaction,
) {
return OrderTile(
transaction: transaction,
onTap: () {},
);
}).toList(),
),
],
),
),
),
]),
),
),
],
),
);
}
}
// 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;
}
}
lib/presentation/pages/order/widgets/order_tile.dart
+401
View 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 OrderTile extends StatelessWidget {
final Transaction transaction;
final VoidCallback? onTap;
final VoidCallback? onPrint;
final VoidCallback? onRefund;
const OrderTile({
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;
}
}
}
lib/presentation/pages/order/widgets/status_tile.dart
+39
View File
@@ -0,0 +1,39 @@
import 'package:flutter/material.dart';
import '../../../../common/theme/theme.dart';
class OrderStatusTile extends StatelessWidget {
final String label;
final bool isSelected;
final void Function(bool)? onSelected;
const OrderStatusTile({
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),
);
}
}