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

feat: order

Browse Source
This commit is contained in:
efrilm
2025-08-18 14:24:15 +07:00
parent 62eb15b27f
commit d3f2cb300c
19 changed files with 6669 additions and 277 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/presentation/pages/order/order_page.dart
+164 -190
View File
@@ -1,20 +1,32 @@
import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:line_icons/line_icons.dart';
import '../../../application/order/order_loader/order_loader_bloc.dart';
import '../../../common/theme/theme.dart';
import '../../../injection.dart';
import '../../components/appbar/appbar.dart';
import '../../components/button/button.dart';
import '../../components/spacer/spacer.dart';
import '../../components/widgets/empty_widget.dart';
import 'widgets/status_tile.dart';
import 'widgets/order_tile.dart';
@RoutePage()
class OrderPage extends StatefulWidget {
class OrderPage extends StatefulWidget implements AutoRouteWrapper {
const OrderPage({super.key});
@override
State<OrderPage> createState() => _OrderPageState();
@override
Widget wrappedRoute(BuildContext context) => BlocProvider(
create: (_) =>
getIt<OrderLoaderBloc>()
..add(OrderLoaderEvent.fetched(isRefresh: true)),
child: this,
);
}
class _OrderPageState extends State<OrderPage> with TickerProviderStateMixin {
@@ -22,15 +34,11 @@ class _OrderPageState extends State<OrderPage> with TickerProviderStateMixin {
late AnimationController _slideController;
late Animation<double> _fadeAnimation;
late Animation<Offset> _slideAnimation;
final ScrollController _scrollController = ScrollController();
// Filter state
String selectedFilter = 'All';
final List<String> filterOptions = [
'All',
'Completed',
'Pending',
'Refunded',
];
final List<String> filterOptions = ['All', 'Completed', 'Pending'];
@override
void initState() {
@@ -66,202 +74,168 @@ class _OrderPageState extends State<OrderPage> with TickerProviderStateMixin {
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),
],
),
body: BlocListener<OrderLoaderBloc, OrderLoaderState>(
listenWhen: (p, c) => p.status != c.status,
listener: (context, state) {
context.read<OrderLoaderBloc>().add(
OrderLoaderEvent.fetched(isRefresh: true),
);
},
child: BlocBuilder<OrderLoaderBloc, OrderLoaderState>(
builder: (context, state) {
return NotificationListener<ScrollNotification>(
onNotification: (notification) {
if (notification is ScrollEndNotification &&
_scrollController.position.extentAfter == 0) {
context.read<OrderLoaderBloc>().add(
OrderLoaderEvent.fetched(),
);
return true;
}
// 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(),
),
),
],
),
),
),
),
return true;
},
child: CustomScrollView(
controller: _scrollController,
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),
],
),
// 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,
),
// 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,
),
const SizedBox(height: 16),
Text(
'No ${selectedFilter.toLowerCase()} transactions found',
style: TextStyle(
color: AppColor.textSecondary,
fontSize: 16,
),
child: OrderStatusTile(
label: option,
isSelected: option == selectedFilter,
onSelected: (isSelected) {
if (isSelected) {
setState(() {
selectedFilter = option;
});
if (option.toLowerCase() == 'all') {
context.read<OrderLoaderBloc>().add(
OrderLoaderEvent.statusChanged(
'',
),
);
} else {
context.read<OrderLoaderBloc>().add(
OrderLoaderEvent.statusChanged(
option.toLowerCase(),
),
);
}
}
},
),
],
),
)
: Column(
children: filteredTransactions.map((
transaction,
) {
return OrderTile(
transaction: transaction,
onTap: () {},
);
}).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(
'${state.orders.length} ${selectedFilter.toLowerCase()} order${state.orders.length != 1 ? 's' : ''}',
style: TextStyle(
color: AppColor.textSecondary,
fontSize: 14,
),
),
],
),
),
// Transaction List
state.orders.isEmpty
? EmptyWidget(
title: 'Order',
message:
'No ${selectedFilter.toLowerCase()} orders found',
)
: ListView.builder(
itemCount: state.orders.length,
shrinkWrap: true,
physics:
const NeverScrollableScrollPhysics(),
padding: EdgeInsets.zero,
itemBuilder: (context, index) {
return OrderTile(
onTap: () {},
order: state.orders[index],
);
},
),
],
),
),
),
]),
),
),
],
),
);
},
),
),
);
}
lib/presentation/pages/order/widgets/order_tile.dart
+165 -87
View File
@@ -2,41 +2,17 @@ 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 }
import '../../../../domain/order/order.dart';
class OrderTile extends StatelessWidget {
final Transaction transaction;
final Order order;
final VoidCallback? onTap;
final VoidCallback? onPrint;
final VoidCallback? onRefund;
const OrderTile({
super.key,
required this.transaction,
required this.order,
this.onTap,
this.onPrint,
this.onRefund,
@@ -73,8 +49,8 @@ class OrderTile extends StatelessWidget {
_buildHeaderRow(),
const SizedBox(height: 12),
// Transaction Info
_buildTransactionInfo(),
// Order Info
_buildOrderInfo(),
const SizedBox(height: 16),
// Amount Section
@@ -99,7 +75,9 @@ class OrderTile extends StatelessWidget {
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
transaction.receiptNumber ?? 'TXN-${transaction.id}',
order.orderNumber.isNotEmpty
? order.orderNumber
: 'ORD-${order.id}',
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
@@ -108,7 +86,7 @@ class OrderTile extends StatelessWidget {
),
const SizedBox(height: 2),
Text(
DateFormat('dd MMM yyyy, HH:mm').format(transaction.date),
_formatDate(order.createdAt),
style: const TextStyle(
fontSize: 12,
color: AppColor.textSecondary,
@@ -126,27 +104,38 @@ class OrderTile extends StatelessWidget {
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;
// Check isVoid and isRefund first for display
if (order.isVoid) {
statusColor = AppColor.error;
statusText = 'Void';
statusIcon = Icons.block;
} else if (order.isRefund) {
statusColor = AppColor.info;
statusText = 'Refunded';
statusIcon = Icons.undo;
} else {
// Handle status values (only pending and completed)
switch (order.status.toLowerCase()) {
case 'completed':
case 'paid':
case 'finished':
statusColor = AppColor.success;
statusText = 'Completed';
statusIcon = Icons.check_circle;
break;
case 'pending':
case 'waiting':
case 'processing':
statusColor = AppColor.warning;
statusText = 'Pending';
statusIcon = Icons.schedule;
break;
default:
statusColor = AppColor.textSecondary;
statusText = order.status;
statusIcon = Icons.info;
break;
}
}
return Container(
@@ -174,7 +163,7 @@ class OrderTile extends StatelessWidget {
);
}
Widget _buildTransactionInfo() {
Widget _buildOrderInfo() {
return Row(
children: [
Expanded(
@@ -184,11 +173,11 @@ class OrderTile extends StatelessWidget {
children: [
Row(
children: [
Icon(Icons.person_outline, size: 16, color: AppColor.primary),
Icon(_getOrderInfoIcon(), size: 16, color: AppColor.primary),
const SizedBox(width: 6),
Expanded(
child: Text(
transaction.customerName,
_getOrderInfoText(),
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
@@ -209,7 +198,7 @@ class OrderTile extends StatelessWidget {
),
const SizedBox(width: 6),
Text(
'${transaction.itemCount} items',
'${order.orderItems.length} items',
style: const TextStyle(
fontSize: 13,
color: AppColor.textSecondary,
@@ -230,13 +219,13 @@ class OrderTile extends StatelessWidget {
mainAxisSize: MainAxisSize.min,
children: [
Icon(
_getPaymentIcon(transaction.paymentMethod),
_getOrderTypeIcon(order.orderType),
size: 16,
color: AppColor.primary,
),
const SizedBox(width: 6),
Text(
transaction.paymentMethod,
order.orderType.isNotEmpty ? order.orderType : 'Dine In',
style: const TextStyle(
fontSize: 12,
fontWeight: FontWeight.w500,
@@ -285,13 +274,24 @@ class OrderTile extends StatelessWidget {
),
const SizedBox(height: 4),
Text(
'Rp ${NumberFormat('#,###').format(transaction.totalAmount)}',
'Rp ${NumberFormat('#,###').format(order.totalAmount)}',
style: const TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: AppColor.textWhite,
),
),
if (order.remainingAmount > 0) ...[
const SizedBox(height: 4),
Text(
'Remaining: Rp ${NumberFormat('#,###').format(order.remainingAmount)}',
style: const TextStyle(
fontSize: 12,
color: AppColor.textWhite,
fontWeight: FontWeight.w400,
),
),
],
],
),
Container(
@@ -300,8 +300,8 @@ class OrderTile extends StatelessWidget {
color: AppColor.backgroundLight.withOpacity(0.2),
shape: BoxShape.circle,
),
child: const Icon(
Icons.attach_money,
child: Icon(
_getPaymentStatusIcon(order.paymentStatus),
color: AppColor.textWhite,
size: 24,
),
@@ -312,19 +312,32 @@ class OrderTile extends StatelessWidget {
}
Widget _buildFooterActions() {
// Don't show anything if order is void or refunded
if (order.isVoid || order.isRefund) {
return const SizedBox.shrink();
}
return Row(
children: [
Expanded(
child: Text(
'ID: ${transaction.id}',
style: const TextStyle(
fontSize: 11,
color: AppColor.textLight,
fontWeight: FontWeight.w500,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (order.payments.isNotEmpty) ...[
const SizedBox(height: 2),
Text(
'Payment: ${_getPaymentMethods()}',
style: const TextStyle(
fontSize: 11,
color: AppColor.textLight,
fontWeight: FontWeight.w400,
),
),
],
],
),
),
if (transaction.status == TransactionStatus.completed) ...[
if (order.status.toLowerCase() == 'completed') ...[
_buildActionButton(
icon: Icons.print,
label: 'Print',
@@ -377,25 +390,90 @@ class OrderTile extends StatelessWidget {
);
}
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;
IconData _getOrderInfoIcon() {
switch (order.orderType.toLowerCase()) {
case 'dine in':
case 'dine_in':
return Icons.table_restaurant_outlined;
case 'takeaway':
case 'take_away':
case 'pickup':
return Icons.person_outline;
case 'delivery':
return Icons.location_on_outlined;
default:
return Icons.payment;
return Icons.receipt_outlined;
}
}
String _getOrderInfoText() {
switch (order.orderType.toLowerCase()) {
case 'dine in':
case 'dine_in':
return 'Table ${order.tableNumber.isNotEmpty ? order.tableNumber : 'N/A'}';
case 'takeaway':
case 'take_away':
case 'pickup':
return 'Pickup Order';
case 'delivery':
return 'Delivery Order';
default:
return order.tableNumber.isNotEmpty
? 'Table ${order.tableNumber}'
: 'Order ${order.orderNumber}';
}
}
IconData _getOrderTypeIcon(String orderType) {
switch (orderType.toLowerCase()) {
case 'dine in':
case 'dine_in':
return Icons.restaurant;
case 'takeaway':
case 'take_away':
case 'pickup':
return Icons.shopping_bag;
case 'delivery':
return Icons.delivery_dining;
default:
return Icons.restaurant_menu;
}
}
IconData _getPaymentStatusIcon(String paymentStatus) {
switch (paymentStatus.toLowerCase()) {
case 'paid':
case 'completed':
return Icons.check_circle;
case 'pending':
case 'partial':
return Icons.schedule;
case 'failed':
case 'cancelled':
return Icons.error;
default:
return Icons.attach_money;
}
}
String _getPaymentMethods() {
if (order.payments.isEmpty) return 'N/A';
// Get unique payment methods from payments
final methods = order.payments
.map((payment) => payment.paymentMethodName)
.toSet()
.join(', ');
return methods.isEmpty ? 'N/A' : methods;
}
String _formatDate(String dateString) {
try {
final date = DateTime.parse(dateString);
return DateFormat('dd MMM yyyy, HH:mm').format(date);
} catch (e) {
return dateString;
}
}
}