add payment detail

lib/core/router/app_router.dart

@@ -10,6 +10,9 @@ import 'package:worker/features/cart/presentation/pages/cart_page.dart';
 import 'package:worker/features/favorites/presentation/pages/favorites_page.dart';
 import 'package:worker/features/loyalty/presentation/pages/rewards_page.dart';
 import 'package:worker/features/main/presentation/pages/main_scaffold.dart';
+import 'package:worker/features/orders/presentation/pages/orders_page.dart';
+import 'package:worker/features/orders/presentation/pages/payment_detail_page.dart';
+import 'package:worker/features/orders/presentation/pages/payments_page.dart';
 import 'package:worker/features/products/presentation/pages/product_detail_page.dart';
 import 'package:worker/features/products/presentation/pages/products_page.dart';
 import 'package:worker/features/promotions/presentation/pages/promotion_detail_page.dart';
@@ -106,6 +109,39 @@ class AppRouter {
         ),
       ),
 
+      // Orders Route
+      GoRoute(
+        path: RouteNames.orders,
+        name: RouteNames.orders,
+        pageBuilder: (context, state) => MaterialPage(
+          key: state.pageKey,
+          child: const OrdersPage(),
+        ),
+      ),
+
+      // Payments Route
+      GoRoute(
+        path: RouteNames.payments,
+        name: RouteNames.payments,
+        pageBuilder: (context, state) => MaterialPage(
+          key: state.pageKey,
+          child: const PaymentsPage(),
+        ),
+      ),
+
+      // Payment Detail Route
+      GoRoute(
+        path: RouteNames.paymentDetail,
+        name: RouteNames.paymentDetail,
+        pageBuilder: (context, state) {
+          final invoiceId = state.pathParameters['id'];
+          return MaterialPage(
+            key: state.pageKey,
+            child: PaymentDetailPage(invoiceId: invoiceId ?? ''),
+          );
+        },
+      ),
+
       // TODO: Add more routes as features are implemented
     ],
 
@@ -202,6 +238,7 @@ class RouteNames {
   static const String orders = '/orders';
   static const String orderDetail = '/orders/:id';
   static const String payments = '/payments';
+  static const String paymentDetail = '/payments/:id';
 
   // Projects & Quotes Routes
   static const String projects = '/projects';

lib/features/home/presentation/pages/home_page.dart

@@ -188,13 +188,13 @@ class HomePage extends ConsumerWidget {
                       QuickAction(
                         icon: Icons.inventory_2,
                         label: 'Đơn hàng',
-                        onTap: () => _showComingSoon(context, 'Đơn hàng', l10n),
+                        onTap: () => context.push(RouteNames.orders),
                       ),
                       QuickAction(
                         icon: Icons.receipt_long,
                         label: 'Thanh toán',
                         onTap: () =>
-                            _showComingSoon(context, 'Thanh toán', l10n),
+                            context.push(RouteNames.payments)
                       ),
                     ],
                   ),

lib/features/orders/data/datasources/invoices_local_datasource.dart

@@ -0,0 +1,248 @@
+/// Local Data Source: Invoices
+///
+/// Provides mock invoice data for development and testing.
+library;
+
+import 'dart:convert';
+
+import 'package:flutter/foundation.dart';
+import 'package:worker/features/orders/data/models/invoice_model.dart';
+
+/// Invoices Local Data Source
+///
+/// Manages local mock invoice data.
+class InvoicesLocalDataSource {
+  /// Get all mock invoices
+  Future<List<InvoiceModel>> getAllInvoices() async {
+    try {
+      debugPrint('[InvoicesLocalDataSource] Loading mock invoices...');
+
+      // Parse mock JSON data
+      final decoded = jsonDecode(_mockInvoicesJson);
+      if (decoded is! List) {
+        throw Exception('Invalid JSON format: expected List');
+      }
+
+      final invoices = (decoded as List<dynamic>)
+          .map((json) => InvoiceModel.fromJson(json as Map<String, dynamic>))
+          .toList();
+
+      debugPrint('[InvoicesLocalDataSource] Loaded ${invoices.length} invoices');
+      return invoices;
+    } catch (e, stackTrace) {
+      debugPrint('[InvoicesLocalDataSource] Error loading invoices: $e');
+      debugPrint('Stack trace: $stackTrace');
+      rethrow;
+    }
+  }
+
+  /// Get invoices by status
+  Future<List<InvoiceModel>> getInvoicesByStatus(String status) async {
+    try {
+      final allInvoices = await getAllInvoices();
+      final filtered = allInvoices
+          .where((invoice) => invoice.status.name == status)
+          .toList();
+
+      debugPrint(
+        '[InvoicesLocalDataSource] Filtered ${filtered.length} invoices with status: $status',
+      );
+      return filtered;
+    } catch (e) {
+      debugPrint('[InvoicesLocalDataSource] Error filtering invoices: $e');
+      rethrow;
+    }
+  }
+
+  /// Search invoices by invoice number or order ID
+  Future<List<InvoiceModel>> searchInvoices(String query) async {
+    try {
+      if (query.isEmpty) {
+        return getAllInvoices();
+      }
+
+      final allInvoices = await getAllInvoices();
+      final filtered = allInvoices
+          .where(
+            (invoice) =>
+                invoice.invoiceNumber.toLowerCase().contains(query.toLowerCase()) ||
+                (invoice.orderId?.toLowerCase().contains(query.toLowerCase()) ?? false),
+          )
+          .toList();
+
+      debugPrint(
+        '[InvoicesLocalDataSource] Found ${filtered.length} invoices matching "$query"',
+      );
+      return filtered;
+    } catch (e) {
+      debugPrint('[InvoicesLocalDataSource] Error searching invoices: $e');
+      rethrow;
+    }
+  }
+
+  /// Get invoice by ID
+  Future<InvoiceModel?> getInvoiceById(String invoiceId) async {
+    try {
+      final allInvoices = await getAllInvoices();
+      final invoice = allInvoices.firstWhere(
+        (invoice) => invoice.invoiceId == invoiceId,
+        orElse: () => throw Exception('Invoice not found: $invoiceId'),
+      );
+
+      debugPrint('[InvoicesLocalDataSource] Found invoice: ${invoice.invoiceNumber}');
+      return invoice;
+    } catch (e) {
+      debugPrint('[InvoicesLocalDataSource] Error getting invoice: $e');
+      return null;
+    }
+  }
+
+  /// Get overdue invoices
+  Future<List<InvoiceModel>> getOverdueInvoices() async {
+    try {
+      final allInvoices = await getAllInvoices();
+      final overdue = allInvoices
+          .where((invoice) => invoice.isOverdue)
+          .toList();
+
+      debugPrint('[InvoicesLocalDataSource] Found ${overdue.length} overdue invoices');
+      return overdue;
+    } catch (e) {
+      debugPrint('[InvoicesLocalDataSource] Error getting overdue invoices: $e');
+      rethrow;
+    }
+  }
+
+  /// Get unpaid invoices (issued but not paid)
+  Future<List<InvoiceModel>> getUnpaidInvoices() async {
+    try {
+      final allInvoices = await getAllInvoices();
+      final unpaid = allInvoices
+          .where((invoice) => invoice.status.name == 'issued' && !invoice.isPaid)
+          .toList();
+
+      debugPrint('[InvoicesLocalDataSource] Found ${unpaid.length} unpaid invoices');
+      return unpaid;
+    } catch (e) {
+      debugPrint('[InvoicesLocalDataSource] Error getting unpaid invoices: $e');
+      rethrow;
+    }
+  }
+
+  /// Mock invoices JSON data
+  /// Matches the HTML design with 5 sample invoices
+  static const String _mockInvoicesJson = '''
+  [
+    {
+      "invoice_id": "inv_001",
+      "invoice_number": "INV001",
+      "user_id": "user_001",
+      "order_id": "ord_001",
+      "invoice_type": "sales",
+      "issue_date": "2025-08-03T00:00:00.000Z",
+      "due_date": "2025-08-13T00:00:00.000Z",
+      "currency": "VND",
+      "subtotal_amount": 85000000,
+      "tax_amount": 0,
+      "discount_amount": 0,
+      "shipping_amount": 0,
+      "total_amount": 85000000,
+      "amount_paid": 25000000,
+      "amount_remaining": 60000000,
+      "status": "overdue",
+      "payment_terms": "Thanh toán trong 10 ngày",
+      "notes": "Hóa đơn cho đơn hàng DH001234",
+      "created_at": "2025-08-03T00:00:00.000Z",
+      "updated_at": "2025-08-03T00:00:00.000Z"
+    },
+    {
+      "invoice_id": "inv_002",
+      "invoice_number": "INV002",
+      "user_id": "user_001",
+      "order_id": "ord_002",
+      "invoice_type": "sales",
+      "issue_date": "2025-07-15T00:00:00.000Z",
+      "due_date": "2025-08-15T00:00:00.000Z",
+      "currency": "VND",
+      "subtotal_amount": 42500000,
+      "tax_amount": 0,
+      "discount_amount": 0,
+      "shipping_amount": 0,
+      "total_amount": 42500000,
+      "amount_paid": 0,
+      "amount_remaining": 42500000,
+      "status": "issued",
+      "payment_terms": "Thanh toán trong 30 ngày",
+      "notes": "Hóa đơn cho đơn hàng DH001233",
+      "created_at": "2025-07-15T00:00:00.000Z",
+      "updated_at": "2025-07-15T00:00:00.000Z"
+    },
+    {
+      "invoice_id": "inv_003",
+      "invoice_number": "INV003",
+      "user_id": "user_001",
+      "order_id": "ord_003",
+      "invoice_type": "sales",
+      "issue_date": "2025-06-01T00:00:00.000Z",
+      "due_date": "2025-07-01T00:00:00.000Z",
+      "currency": "VND",
+      "subtotal_amount": 150000000,
+      "tax_amount": 0,
+      "discount_amount": 0,
+      "shipping_amount": 0,
+      "total_amount": 150000000,
+      "amount_paid": 75000000,
+      "amount_remaining": 75000000,
+      "status": "partiallyPaid",
+      "payment_terms": "Thanh toán theo tiến độ",
+      "notes": "Hóa đơn cho đơn hàng DH001232 - Đã thanh toán 50%",
+      "created_at": "2025-06-01T00:00:00.000Z",
+      "updated_at": "2025-06-15T00:00:00.000Z"
+    },
+    {
+      "invoice_id": "inv_004",
+      "invoice_number": "INV004",
+      "user_id": "user_001",
+      "order_id": "ord_004",
+      "invoice_type": "sales",
+      "issue_date": "2025-05-10T00:00:00.000Z",
+      "due_date": "2025-06-10T00:00:00.000Z",
+      "currency": "VND",
+      "subtotal_amount": 32800000,
+      "tax_amount": 0,
+      "discount_amount": 0,
+      "shipping_amount": 0,
+      "total_amount": 32800000,
+      "amount_paid": 32800000,
+      "amount_remaining": 0,
+      "status": "paid",
+      "payment_terms": "Thanh toán ngay",
+      "notes": "Hóa đơn cho đơn hàng DH001231 - Đã thanh toán đầy đủ",
+      "created_at": "2025-05-10T00:00:00.000Z",
+      "updated_at": "2025-05-12T00:00:00.000Z"
+    },
+    {
+      "invoice_id": "inv_005",
+      "invoice_number": "INV005",
+      "user_id": "user_001",
+      "order_id": "ord_005",
+      "invoice_type": "sales",
+      "issue_date": "2025-04-20T00:00:00.000Z",
+      "due_date": "2025-05-20T00:00:00.000Z",
+      "currency": "VND",
+      "subtotal_amount": 95300000,
+      "tax_amount": 0,
+      "discount_amount": 0,
+      "shipping_amount": 0,
+      "total_amount": 95300000,
+      "amount_paid": 0,
+      "amount_remaining": 95300000,
+      "status": "overdue",
+      "payment_terms": "Thanh toán trong 30 ngày",
+      "notes": "Hóa đơn cho đơn hàng DH001230 - Đã quá hạn",
+      "created_at": "2025-04-20T00:00:00.000Z",
+      "updated_at": "2025-04-20T00:00:00.000Z"
+    }
+  ]
+  ''';
+}

lib/features/orders/data/datasources/orders_local_datasource.dart

@@ -0,0 +1,215 @@
+/// Local Data Source: Orders
+///
+/// Provides mock order data for development and testing.
+library;
+
+import 'dart:convert';
+
+import 'package:flutter/foundation.dart';
+import 'package:worker/core/database/models/enums.dart';
+import 'package:worker/features/orders/data/models/order_model.dart';
+
+/// Orders Local Data Source
+///
+/// Manages local mock order data.
+class OrdersLocalDataSource {
+  /// Get all mock orders
+  Future<List<OrderModel>> getAllOrders() async {
+    try {
+      debugPrint('[OrdersLocalDataSource] Loading mock orders...');
+
+      // Parse mock JSON data
+      final decoded = jsonDecode(_mockOrdersJson);
+      if (decoded is! List) {
+        throw Exception('Invalid JSON format: expected List');
+      }
+
+      final orders = (decoded as List<dynamic>)
+          .map((json) => OrderModel.fromJson(json as Map<String, dynamic>))
+          .toList();
+
+      debugPrint('[OrdersLocalDataSource] Loaded ${orders.length} orders');
+      return orders;
+    } catch (e, stackTrace) {
+      debugPrint('[OrdersLocalDataSource] Error loading orders: $e');
+      debugPrint('Stack trace: $stackTrace');
+      rethrow;
+    }
+  }
+
+  /// Get orders by status
+  Future<List<OrderModel>> getOrdersByStatus(OrderStatus status) async {
+    try {
+      final allOrders = await getAllOrders();
+      final filtered = allOrders
+          .where((order) => order.status == status)
+          .toList();
+
+      debugPrint(
+        '[OrdersLocalDataSource] Filtered ${filtered.length} orders with status: $status',
+      );
+      return filtered;
+    } catch (e) {
+      debugPrint('[OrdersLocalDataSource] Error filtering orders: $e');
+      rethrow;
+    }
+  }
+
+  /// Search orders by order number
+  Future<List<OrderModel>> searchOrders(String query) async {
+    try {
+      if (query.isEmpty) {
+        return getAllOrders();
+      }
+
+      final allOrders = await getAllOrders();
+      final filtered = allOrders
+          .where(
+            (order) =>
+                order.orderNumber.toLowerCase().contains(query.toLowerCase()),
+          )
+          .toList();
+
+      debugPrint(
+        '[OrdersLocalDataSource] Found ${filtered.length} orders matching "$query"',
+      );
+      return filtered;
+    } catch (e) {
+      debugPrint('[OrdersLocalDataSource] Error searching orders: $e');
+      rethrow;
+    }
+  }
+
+  /// Get order by ID
+  Future<OrderModel?> getOrderById(String orderId) async {
+    try {
+      final allOrders = await getAllOrders();
+      final order = allOrders.firstWhere(
+        (order) => order.orderId == orderId,
+        orElse: () => throw Exception('Order not found: $orderId'),
+      );
+
+      debugPrint('[OrdersLocalDataSource] Found order: ${order.orderNumber}');
+      return order;
+    } catch (e) {
+      debugPrint('[OrdersLocalDataSource] Error getting order: $e');
+      return null;
+    }
+  }
+
+  /// Mock orders JSON data
+  /// Matches the HTML design with 5 sample orders
+  static const String _mockOrdersJson = '''
+  [
+    {
+      "order_id": "ord_001",
+      "order_number": "DH001234",
+      "user_id": "user_001",
+      "status": "processing",
+      "total_amount": 12900000,
+      "discount_amount": 0,
+      "tax_amount": 0,
+      "shipping_fee": 0,
+      "final_amount": 12900000,
+      "shipping_address": {
+        "name": "Nguyễn Văn A",
+        "phone": "0901234567",
+        "street": "123 Đường Nguyễn Văn Linh",
+        "district": "Quận 7",
+        "city": "HCM",
+        "postal_code": "70000"
+      },
+      "expected_delivery_date": "2025-08-06T00:00:00.000Z",
+      "created_at": "2025-08-03T00:00:00.000Z",
+      "updated_at": "2025-08-03T00:00:00.000Z"
+    },
+    {
+      "order_id": "ord_002",
+      "order_number": "DH001233",
+      "user_id": "user_001",
+      "status": "completed",
+      "total_amount": 8500000,
+      "discount_amount": 0,
+      "tax_amount": 0,
+      "shipping_fee": 0,
+      "final_amount": 8500000,
+      "shipping_address": {
+        "name": "Trần Thị B",
+        "phone": "0912345678",
+        "street": "456 Đại lộ Bình Dương",
+        "city": "Thủ Dầu Một, Bình Dương",
+        "postal_code": "75000"
+      },
+      "expected_delivery_date": "2025-06-27T00:00:00.000Z",
+      "actual_delivery_date": "2025-06-27T00:00:00.000Z",
+      "created_at": "2025-06-24T00:00:00.000Z",
+      "updated_at": "2025-06-27T00:00:00.000Z"
+    },
+    {
+      "order_id": "ord_003",
+      "order_number": "DH001232",
+      "user_id": "user_001",
+      "status": "shipped",
+      "total_amount": 15200000,
+      "discount_amount": 0,
+      "tax_amount": 0,
+      "shipping_fee": 0,
+      "final_amount": 15200000,
+      "shipping_address": {
+        "name": "Lê Văn C",
+        "phone": "0923456789",
+        "street": "789 Phố Duy Tân",
+        "district": "Cầu Giấy",
+        "city": "Hà Nội",
+        "postal_code": "10000"
+      },
+      "expected_delivery_date": "2025-03-05T00:00:00.000Z",
+      "created_at": "2025-03-01T00:00:00.000Z",
+      "updated_at": "2025-03-02T00:00:00.000Z"
+    },
+    {
+      "order_id": "ord_004",
+      "order_number": "DH001231",
+      "user_id": "user_001",
+      "status": "pending",
+      "total_amount": 6750000,
+      "discount_amount": 0,
+      "tax_amount": 0,
+      "shipping_fee": 0,
+      "final_amount": 6750000,
+      "shipping_address": {
+        "name": "Phạm Thị D",
+        "phone": "0934567890",
+        "street": "321 Đường Võ Văn Ngân",
+        "city": "Thủ Đức, HCM",
+        "postal_code": "71000"
+      },
+      "expected_delivery_date": "2024-11-12T00:00:00.000Z",
+      "created_at": "2024-11-08T00:00:00.000Z",
+      "updated_at": "2024-11-08T00:00:00.000Z"
+    },
+    {
+      "order_id": "ord_005",
+      "order_number": "DH001230",
+      "user_id": "user_001",
+      "status": "cancelled",
+      "total_amount": 3200000,
+      "discount_amount": 0,
+      "tax_amount": 0,
+      "shipping_fee": 0,
+      "final_amount": 3200000,
+      "shipping_address": {
+        "name": "Hoàng Văn E",
+        "phone": "0945678901",
+        "street": "654 Đường 3 Tháng 2",
+        "city": "Rạch Giá, Kiên Giang",
+        "postal_code": "92000"
+      },
+      "expected_delivery_date": "2024-08-04T00:00:00.000Z",
+      "cancellation_reason": "Khách hàng yêu cầu hủy",
+      "created_at": "2024-07-30T00:00:00.000Z",
+      "updated_at": "2024-07-31T00:00:00.000Z"
+    }
+  ]
+  ''';
+}

lib/features/orders/presentation/pages/orders_page.dart

@@ -0,0 +1,376 @@
+/// Page: Orders Page
+///
+/// Displays list of orders with search and filter functionality.
+library;
+
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:go_router/go_router.dart';
+import 'package:worker/core/constants/ui_constants.dart';
+import 'package:worker/core/database/models/enums.dart';
+import 'package:worker/core/theme/colors.dart';
+import 'package:worker/features/orders/presentation/providers/orders_provider.dart';
+import 'package:worker/features/orders/presentation/widgets/order_card.dart';
+
+/// Orders Page
+///
+/// Features:
+/// - Search bar for order numbers
+/// - Filter pills for order status
+/// - List of order cards
+/// - Pull-to-refresh
+class OrdersPage extends ConsumerStatefulWidget {
+  const OrdersPage({super.key});
+
+  @override
+  ConsumerState<OrdersPage> createState() => _OrdersPageState();
+}
+
+class _OrdersPageState extends ConsumerState<OrdersPage> {
+  final TextEditingController _searchController = TextEditingController();
+
+  @override
+  void initState() {
+    super.initState();
+    _searchController.addListener(_onSearchChanged);
+  }
+
+  @override
+  void dispose() {
+    _searchController.removeListener(_onSearchChanged);
+    _searchController.dispose();
+    super.dispose();
+  }
+
+  void _onSearchChanged() {
+    ref.read(orderSearchQueryProvider.notifier).updateQuery(
+          _searchController.text,
+        );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final filteredOrdersAsync = ref.watch(filteredOrdersProvider);
+    final selectedStatus = ref.watch(selectedOrderStatusProvider);
+
+    return Scaffold(
+      backgroundColor: const Color(0xFFF4F6F8),
+      appBar: AppBar(
+        leading: IconButton(
+          icon: const Icon(Icons.arrow_back, color: Colors.black),
+          onPressed: () => context.pop(),
+        ),
+        title: const Text(
+          'Danh sách đơn hàng',
+          style: TextStyle(color: Colors.black),
+        ),
+        elevation: AppBarSpecs.elevation,
+        backgroundColor: AppColors.white,
+        foregroundColor: AppColors.grey900,
+        centerTitle: false,
+        actions: const [
+          SizedBox(width: AppSpacing.sm),
+        ],
+      ),
+      body: RefreshIndicator(
+        onRefresh: () async {
+          await ref.read(ordersProvider.notifier).refresh();
+        },
+        child: CustomScrollView(
+          slivers: [
+            // Search Bar
+            SliverToBoxAdapter(
+              child: Padding(
+                padding: const EdgeInsets.all(16),
+                child: _buildSearchBar(),
+              ),
+            ),
+
+            // Filter Pills
+            SliverToBoxAdapter(
+              child: _buildFilterPills(selectedStatus),
+            ),
+
+            // Orders List
+            SliverPadding(
+              padding: const EdgeInsets.fromLTRB(16, 8, 16, 24),
+              sliver: filteredOrdersAsync.when(
+                data: (orders) {
+                  if (orders.isEmpty) {
+                    return _buildEmptyState();
+                  }
+
+                  return SliverList(
+                    delegate: SliverChildBuilderDelegate(
+                      (context, index) {
+                        final order = orders[index];
+                        return OrderCard(
+                          order: order,
+                          onTap: () {
+                            // TODO: Navigate to order detail page
+                            ScaffoldMessenger.of(context).showSnackBar(
+                              SnackBar(
+                                content: Text(
+                                  'Order ${order.orderNumber} tapped',
+                                ),
+                                duration: const Duration(seconds: 1),
+                              ),
+                            );
+                          },
+                        );
+                      },
+                      childCount: orders.length,
+                    ),
+                  );
+                },
+                loading: () => _buildLoadingState(),
+                error: (error, stack) => _buildErrorState(error),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  /// Build search bar
+  Widget _buildSearchBar() {
+    return Container(
+      decoration: BoxDecoration(
+        color: AppColors.white,
+        borderRadius: BorderRadius.circular(12),
+        boxShadow: [
+          BoxShadow(
+            color: Colors.black.withValues(alpha: 0.05),
+            blurRadius: 4,
+            offset: const Offset(0, 2),
+          ),
+        ],
+      ),
+      child: TextField(
+        controller: _searchController,
+        decoration: InputDecoration(
+          hintText: 'Mã đơn hàng',
+          hintStyle: const TextStyle(
+            color: AppColors.grey500,
+            fontSize: 14,
+          ),
+          prefixIcon: const Icon(
+            Icons.search,
+            color: AppColors.grey500,
+            size: 20,
+          ),
+          suffixIcon: _searchController.text.isNotEmpty
+              ? IconButton(
+                  icon: const Icon(
+                    Icons.clear,
+                    color: AppColors.grey500,
+                    size: 20,
+                  ),
+                  onPressed: () {
+                    _searchController.clear();
+                  },
+                )
+              : null,
+          border: OutlineInputBorder(
+            borderRadius: BorderRadius.circular(12),
+            borderSide: BorderSide.none,
+          ),
+          contentPadding: const EdgeInsets.symmetric(
+            horizontal: 16,
+            vertical: 12,
+          ),
+        ),
+      ),
+    );
+  }
+
+  /// Build filter pills
+  Widget _buildFilterPills(OrderStatus? selectedStatus) {
+    return Container(
+      height: 48,
+      padding: const EdgeInsets.symmetric(horizontal: 16),
+      child: ListView(
+        scrollDirection: Axis.horizontal,
+        children: [
+          // All filter
+          _buildFilterChip(
+            label: 'Tất cả',
+            isSelected: selectedStatus == null,
+            onTap: () {
+              ref.read(selectedOrderStatusProvider.notifier).clearSelection();
+            },
+          ),
+          const SizedBox(width: 8),
+
+          // Pending filter
+          _buildFilterChip(
+            label: 'Chờ xác nhận',
+            isSelected: selectedStatus == OrderStatus.pending,
+            onTap: () {
+              ref
+                  .read(selectedOrderStatusProvider.notifier)
+                  .selectStatus(OrderStatus.pending);
+            },
+          ),
+          const SizedBox(width: 8),
+
+          // Processing filter
+          _buildFilterChip(
+            label: 'Đang xử lý',
+            isSelected: selectedStatus == OrderStatus.processing,
+            onTap: () {
+              ref
+                  .read(selectedOrderStatusProvider.notifier)
+                  .selectStatus(OrderStatus.processing);
+            },
+          ),
+          const SizedBox(width: 8),
+
+          // Shipped filter
+          _buildFilterChip(
+            label: 'Đang giao',
+            isSelected: selectedStatus == OrderStatus.shipped,
+            onTap: () {
+              ref
+                  .read(selectedOrderStatusProvider.notifier)
+                  .selectStatus(OrderStatus.shipped);
+            },
+          ),
+          const SizedBox(width: 8),
+
+          // Completed filter
+          _buildFilterChip(
+            label: 'Hoàn thành',
+            isSelected: selectedStatus == OrderStatus.completed,
+            onTap: () {
+              ref
+                  .read(selectedOrderStatusProvider.notifier)
+                  .selectStatus(OrderStatus.completed);
+            },
+          ),
+          const SizedBox(width: 8),
+
+          // Cancelled filter
+          _buildFilterChip(
+            label: 'Đã hủy',
+            isSelected: selectedStatus == OrderStatus.cancelled,
+            onTap: () {
+              ref
+                  .read(selectedOrderStatusProvider.notifier)
+                  .selectStatus(OrderStatus.cancelled);
+            },
+          ),
+        ],
+      ),
+    );
+  }
+
+  /// Build individual filter chip
+  Widget _buildFilterChip({
+    required String label,
+    required bool isSelected,
+    required VoidCallback onTap,
+  }) {
+    return GestureDetector(
+      onTap: onTap,
+      child: Container(
+        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+        decoration: BoxDecoration(
+          color: isSelected ? AppColors.primaryBlue : AppColors.grey100,
+          borderRadius: BorderRadius.circular(20),
+        ),
+        child: Center(
+          child: Text(
+            label,
+            style: TextStyle(
+              fontSize: 14,
+              fontWeight: isSelected ? FontWeight.w600 : FontWeight.w400,
+              color: isSelected ? Colors.white : AppColors.grey900,
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+
+  /// Build empty state
+  Widget _buildEmptyState() {
+    return SliverFillRemaining(
+      child: Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Icon(
+              Icons.receipt_long_outlined,
+              size: 80,
+              color: AppColors.grey500.withValues(alpha: 0.5),
+            ),
+            const SizedBox(height: 16),
+            const Text(
+              'Không có đơn hàng nào',
+              style: TextStyle(
+                fontSize: 18,
+                fontWeight: FontWeight.w600,
+                color: AppColors.grey500,
+              ),
+            ),
+            const SizedBox(height: 8),
+            const Text(
+              'Thử tìm kiếm với từ khóa khác',
+              style: TextStyle(
+                fontSize: 14,
+                color: AppColors.grey500,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  /// Build loading state
+  Widget _buildLoadingState() {
+    return const SliverFillRemaining(
+      child: Center(
+        child: CircularProgressIndicator(),
+      ),
+    );
+  }
+
+  /// Build error state
+  Widget _buildErrorState(Object error) {
+    return SliverFillRemaining(
+      child: Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Icon(
+              Icons.error_outline,
+              size: 80,
+              color: AppColors.danger.withValues(alpha: 0.7),
+            ),
+            const SizedBox(height: 16),
+            const Text(
+              'Có lỗi xảy ra',
+              style: TextStyle(
+                fontSize: 18,
+                fontWeight: FontWeight.w600,
+                color: AppColors.grey900,
+              ),
+            ),
+            const SizedBox(height: 8),
+            Text(
+              error.toString(),
+              style: const TextStyle(
+                fontSize: 14,
+                color: AppColors.grey500,
+              ),
+              textAlign: TextAlign.center,
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/features/orders/presentation/pages/payment_detail_page.dart

@@ -0,0 +1,849 @@
+/// Page: Payment Detail Page
+///
+/// Displays detailed information about an invoice/payment.
+library;
+
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:go_router/go_router.dart';
+import 'package:intl/intl.dart';
+import 'package:worker/core/constants/ui_constants.dart';
+import 'package:worker/core/database/models/enums.dart';
+import 'package:worker/core/theme/colors.dart';
+import 'package:worker/features/orders/presentation/providers/invoices_provider.dart';
+
+/// Payment Detail Page
+///
+/// Features:
+/// - Invoice header with status
+/// - Payment summary
+/// - Customer information
+/// - Payment history
+/// - Action buttons
+class PaymentDetailPage extends ConsumerWidget {
+
+  const PaymentDetailPage({
+    required this.invoiceId,
+    super.key,
+  });
+  /// Invoice ID
+  final String invoiceId;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final invoicesAsync = ref.watch(invoicesProvider);
+
+    return Scaffold(
+      backgroundColor: const Color(0xFFF4F6F8),
+      appBar: AppBar(
+        leading: IconButton(
+          icon: const Icon(Icons.arrow_back, color: Colors.black),
+          onPressed: () => context.pop(),
+        ),
+        title: const Text(
+          'Chi tiết Hóa đơn',
+          style: TextStyle(color: Colors.black),
+        ),
+        elevation: AppBarSpecs.elevation,
+        backgroundColor: AppColors.white,
+        foregroundColor: AppColors.grey900,
+        centerTitle: false,
+        actions: [
+          IconButton(
+            icon: const Icon(Icons.share, color: Colors.black),
+            onPressed: () {
+              // TODO: Implement share functionality
+              ScaffoldMessenger.of(context).showSnackBar(
+                const SnackBar(content: Text('Chia sẻ hóa đơn')),
+              );
+            },
+          ),
+        ],
+      ),
+      body: invoicesAsync.when(
+        data: (invoices) {
+          final invoice = invoices.firstWhere(
+            (inv) => inv.invoiceId == invoiceId,
+            orElse: () => invoices.first,
+          );
+
+          final currencyFormatter = NumberFormat.currency(
+            locale: 'vi_VN',
+            symbol: 'đ',
+            decimalDigits: 0,
+          );
+
+          return SingleChildScrollView(
+            padding: const EdgeInsets.all(16),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.stretch,
+              children: [
+                // Invoice Header Card
+                _buildInvoiceHeader(
+                  invoice.invoiceNumber,
+                  invoice.orderId,
+                  invoice.issueDate,
+                  invoice.status,
+                  currencyFormatter,
+                  invoice.totalAmount,
+                  invoice.amountPaid,
+                  invoice.amountRemaining,
+                ),
+
+                const SizedBox(height: 16),
+
+                // Dates and Customer Info Card
+                _buildCustomerInfo(
+                  invoice.issueDate,
+                  invoice.dueDate,
+                  invoice.isOverdue,
+                ),
+
+                const SizedBox(height: 16),
+
+                // Product List Card
+                _buildProductList(),
+
+                const SizedBox(height: 16),
+
+                // Payment History Card
+                _buildPaymentHistory(
+                  invoice.amountPaid,
+                  invoice.issueDate,
+                  currencyFormatter,
+                ),
+
+                const SizedBox(height: 16),
+
+                // Download Section Card
+                _buildDownloadSection(invoice.invoiceNumber),
+
+                const SizedBox(height: 16),
+
+                // Support Button
+                Container(
+                  width: double.infinity,
+                  margin: const EdgeInsets.symmetric(horizontal: 16),
+                  child: OutlinedButton.icon(
+                    onPressed: () {
+                      // TODO: Navigate to chat/support
+                      ScaffoldMessenger.of(context).showSnackBar(
+                        const SnackBar(content: Text('Liên hệ hỗ trợ')),
+                      );
+                    },
+                    icon: const Icon(Icons.chat_bubble_outline),
+                    label: const Text('Liên hệ hỗ trợ'),
+                    style: OutlinedButton.styleFrom(
+                      padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 16),
+                      side: const BorderSide(color: AppColors.grey100, width: 2),
+                      foregroundColor: AppColors.grey900,
+                      shape: RoundedRectangleBorder(
+                        borderRadius: BorderRadius.circular(8),
+                      ),
+                    ),
+                  ),
+                ),
+
+                const SizedBox(height: 12),
+
+                // Payment Button
+                Container(
+                  width: double.infinity,
+                  margin: const EdgeInsets.symmetric(horizontal: 16),
+                  child: ElevatedButton.icon(
+                    onPressed: (invoice.status == InvoiceStatus.paid || invoice.isPaid)
+                        ? null
+                        : () {
+                            // TODO: Navigate to payment page
+                            ScaffoldMessenger.of(context).showSnackBar(
+                              const SnackBar(content: Text('Mở cổng thanh toán')),
+                            );
+                          },
+                    icon: Icon(
+                      (invoice.status == InvoiceStatus.paid || invoice.isPaid)
+                          ? Icons.check_circle
+                          : Icons.credit_card,
+                    ),
+                    label: Text(
+                      (invoice.status == InvoiceStatus.paid || invoice.isPaid)
+                          ? 'Đã hoàn tất'
+                          : 'Thanh toán',
+                    ),
+                    style: ElevatedButton.styleFrom(
+                      padding: const EdgeInsets.symmetric(vertical: 16),
+                      backgroundColor: (invoice.status == InvoiceStatus.paid || invoice.isPaid)
+                          ? AppColors.success
+                          : AppColors.primaryBlue,
+                      disabledBackgroundColor: AppColors.success,
+                      foregroundColor: Colors.white,
+                      disabledForegroundColor: Colors.white,
+                      elevation: 0,
+                      shape: RoundedRectangleBorder(
+                        borderRadius: BorderRadius.circular(8),
+                      ),
+                    ),
+                  ),
+                ),
+
+                const SizedBox(height: 16),
+              ],
+            ),
+          );
+        },
+        loading: () => const Center(child: CircularProgressIndicator()),
+        error: (error, stack) => Center(
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              const Icon(Icons.error_outline, size: 64, color: AppColors.danger),
+              const SizedBox(height: 16),
+              Text(
+                'Không tìm thấy hóa đơn',
+                style: const TextStyle(fontSize: 18, fontWeight: FontWeight.w600),
+              ),
+              const SizedBox(height: 24),
+              ElevatedButton(
+                onPressed: () => context.pop(),
+                child: const Text('Quay lại'),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  /// Build invoice header section
+  Widget _buildInvoiceHeader(
+    String invoiceNumber,
+    String? orderId,
+    DateTime issueDate,
+    InvoiceStatus status,
+    NumberFormat currencyFormatter,
+    double totalAmount,
+    double amountPaid,
+    double amountRemaining,
+  ) {
+    return Card(
+      elevation: 1,
+      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
+      child: Padding(
+        padding: const EdgeInsets.all(20),
+        child: Column(
+          children: [
+            // Invoice ID and Status
+            Column(
+              children: [
+                Text(
+                  '#$invoiceNumber',
+                  style: const TextStyle(
+                    fontSize: 24,
+                    fontWeight: FontWeight.w700,
+                    color: AppColors.grey900,
+                  ),
+                ),
+                const SizedBox(height: 8),
+                if (orderId != null)
+                  Text(
+                    'Đơn hàng: #$orderId | Ngày đặt: ${_formatDate(issueDate)}',
+                    style: const TextStyle(
+                      fontSize: 14,
+                      color: AppColors.grey500,
+                    ),
+                  ),
+                const SizedBox(height: 12),
+                _buildStatusBadge(status),
+              ],
+            ),
+
+            const Padding(
+              padding: EdgeInsets.symmetric(vertical: 20),
+              child: Divider(height: 1),
+            ),
+
+            // Payment Summary
+            Container(
+              padding: const EdgeInsets.all(16),
+              decoration: BoxDecoration(
+                color: AppColors.grey50,
+                borderRadius: BorderRadius.circular(8),
+              ),
+              child: Column(
+                children: [
+                  _buildSummaryRow(
+                    'Tổng tiền hóa đơn:',
+                    currencyFormatter.format(totalAmount),
+                  ),
+                  const SizedBox(height: 12),
+                  _buildSummaryRow(
+                    'Đã thanh toán:',
+                    currencyFormatter.format(amountPaid),
+                  ),
+                  const Padding(
+                    padding: EdgeInsets.symmetric(vertical: 12),
+                    child: Divider(height: 2, thickness: 2),
+                  ),
+                  _buildSummaryRow(
+                    'Còn lại:',
+                    currencyFormatter.format(amountRemaining),
+                    isHighlighted: true,
+                    valueColor: amountRemaining > 0 ? AppColors.danger : AppColors.success,
+                  ),
+                ],
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  /// Build customer info and dates section
+  Widget _buildCustomerInfo(
+    DateTime issueDate,
+    DateTime dueDate,
+    bool isOverdue,
+  ) {
+    return Card(
+      elevation: 1,
+      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
+      child: Padding(
+        padding: const EdgeInsets.all(20),
+        child: Column(
+          children: [
+            // Dates Grid
+            Row(
+              children: [
+                Expanded(
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      const Text(
+                        'Ngày đặt hàng',
+                        style: TextStyle(
+                          fontSize: 12,
+                          color: AppColors.grey500,
+                        ),
+                      ),
+                      const SizedBox(height: 4),
+                      Text(
+                        _formatDate(issueDate),
+                        style: const TextStyle(
+                          fontSize: 16,
+                          fontWeight: FontWeight.w600,
+                          color: AppColors.grey900,
+                        ),
+                      ),
+                    ],
+                  ),
+                ),
+                Expanded(
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      const Text(
+                        'Hạn thanh toán',
+                        style: TextStyle(
+                          fontSize: 12,
+                          color: AppColors.grey500,
+                        ),
+                      ),
+                      const SizedBox(height: 4),
+                      Text(
+                        _formatDate(dueDate),
+                        style: TextStyle(
+                          fontSize: 16,
+                          fontWeight: FontWeight.w600,
+                          color: isOverdue ? AppColors.danger : AppColors.grey900,
+                        ),
+                      ),
+                    ],
+                  ),
+                ),
+              ],
+            ),
+
+            const SizedBox(height: 20),
+
+            // Customer Info Box
+            Container(
+              padding: const EdgeInsets.all(16),
+              decoration: BoxDecoration(
+                color: AppColors.grey50,
+                borderRadius: BorderRadius.circular(8),
+              ),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  const Text(
+                    'Thông tin khách hàng',
+                    style: TextStyle(
+                      fontSize: 14,
+                      fontWeight: FontWeight.w600,
+                      color: AppColors.grey900,
+                    ),
+                  ),
+                  const SizedBox(height: 8),
+                  const Text(
+                    'Công ty TNHH Xây Dựng Minh An\n'
+                    'Địa chỉ: 123 Nguyễn Văn Linh, Quận 7, TP.HCM\n'
+                    'SĐT: 0901234567 | Email: contact@minhan.com',
+                    style: TextStyle(
+                      fontSize: 14,
+                      color: AppColors.grey500,
+                      height: 1.5,
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  /// Build product list section
+  Widget _buildProductList() {
+    // Mock product data - in real app, this would come from order items
+    final products = [
+      {
+        'name': 'Gạch Granite Eurotile Premium 60x60',
+        'sku': 'GT-PR-6060-001',
+        'quantity': '150 m²',
+        'price': '450.000đ/m²',
+      },
+      {
+        'name': 'Gạch Ceramic Cao Cấp 30x60',
+        'sku': 'CE-CC-3060-002',
+        'quantity': '80 m²',
+        'price': '280.000đ/m²',
+      },
+      {
+        'name': 'Keo dán gạch chuyên dụng',
+        'sku': 'KD-CD-001',
+        'quantity': '20 bao',
+        'price': '85.000đ/bao',
+      },
+    ];
+
+    return Card(
+      elevation: 1,
+      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
+      child: Padding(
+        padding: const EdgeInsets.all(20),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Row(
+              children: [
+                Icon(Icons.inventory_2, color: AppColors.primaryBlue, size: 20),
+                const SizedBox(width: 8),
+                const Text(
+                  'Danh sách sản phẩm',
+                  style: TextStyle(
+                    fontSize: 18,
+                    fontWeight: FontWeight.w700,
+                    color: AppColors.grey900,
+                  ),
+                ),
+              ],
+            ),
+            const SizedBox(height: 16),
+
+            ...products.map((product) => Container(
+                  margin: const EdgeInsets.only(bottom: 12),
+                  padding: const EdgeInsets.all(16),
+                  decoration: BoxDecoration(
+                    border: Border.all(color: AppColors.grey100),
+                    borderRadius: BorderRadius.circular(8),
+                  ),
+                  child: Row(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      // Product image placeholder
+                      Container(
+                        width: 60,
+                        height: 60,
+                        decoration: BoxDecoration(
+                          color: AppColors.grey50,
+                          borderRadius: BorderRadius.circular(8),
+                        ),
+                        child: const Icon(
+                          Icons.image,
+                          color: AppColors.grey500,
+                          size: 24,
+                        ),
+                      ),
+                      const SizedBox(width: 16),
+                      // Product info
+                      Expanded(
+                        child: Column(
+                          crossAxisAlignment: CrossAxisAlignment.start,
+                          children: [
+                            Text(
+                              product['name']!,
+                              style: const TextStyle(
+                                fontSize: 14,
+                                fontWeight: FontWeight.w600,
+                                color: AppColors.grey900,
+                              ),
+                            ),
+                            const SizedBox(height: 4),
+                            Text(
+                              'SKU: ${product['sku']}',
+                              style: const TextStyle(
+                                fontSize: 12,
+                                color: AppColors.grey500,
+                              ),
+                            ),
+                            const SizedBox(height: 8),
+                            Row(
+                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                              children: [
+                                Text(
+                                  'Số lượng: ${product['quantity']}',
+                                  style: const TextStyle(
+                                    fontSize: 12,
+                                    color: AppColors.grey500,
+                                  ),
+                                ),
+                                Text(
+                                  product['price']!,
+                                  style: const TextStyle(
+                                    fontSize: 14,
+                                    fontWeight: FontWeight.w600,
+                                    color: AppColors.grey900,
+                                  ),
+                                ),
+                              ],
+                            ),
+                          ],
+                        ),
+                      ),
+                    ],
+                  ),
+                )).toList(),
+          ],
+        ),
+      ),
+    );
+  }
+
+  /// Build payment history section
+  Widget _buildPaymentHistory(
+    double amountPaid,
+    DateTime paymentDate,
+    NumberFormat currencyFormatter,
+  ) {
+    final hasHistory = amountPaid > 0;
+
+    return Card(
+      elevation: 1,
+      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
+      child: Padding(
+        padding: const EdgeInsets.all(20),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Row(
+              children: [
+                Icon(Icons.history, color: AppColors.primaryBlue, size: 20),
+                const SizedBox(width: 8),
+                const Text(
+                  'Lịch sử thanh toán',
+                  style: TextStyle(
+                    fontSize: 18,
+                    fontWeight: FontWeight.w700,
+                    color: AppColors.grey900,
+                  ),
+                ),
+              ],
+            ),
+            const SizedBox(height: 16),
+
+            if (hasHistory)
+              Container(
+                padding: const EdgeInsets.all(16),
+                decoration: BoxDecoration(
+                  border: Border.all(color: AppColors.grey100),
+                  borderRadius: BorderRadius.circular(8),
+                ),
+                child: Row(
+                  children: [
+                    Container(
+                      width: 40,
+                      height: 40,
+                      decoration: BoxDecoration(
+                        color: AppColors.success.withValues(alpha: 0.1),
+                        shape: BoxShape.circle,
+                      ),
+                      child: const Icon(
+                        Icons.check,
+                        color: AppColors.success,
+                        size: 20,
+                      ),
+                    ),
+                    const SizedBox(width: 16),
+                    Expanded(
+                      child: Column(
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [
+                          const Text(
+                            'Thanh toán lần 1',
+                            style: TextStyle(
+                              fontSize: 14,
+                              fontWeight: FontWeight.w600,
+                              color: AppColors.grey900,
+                            ),
+                          ),
+                          const SizedBox(height: 4),
+                          const Text(
+                            'Chuyển khoản | Ref: TK20241020001',
+                            style: TextStyle(
+                              fontSize: 12,
+                              color: AppColors.grey500,
+                            ),
+                          ),
+                          const SizedBox(height: 4),
+                          Text(
+                            '${_formatDate(paymentDate)} - 14:30',
+                            style: const TextStyle(
+                              fontSize: 12,
+                              color: AppColors.grey500,
+                            ),
+                          ),
+                        ],
+                      ),
+                    ),
+                    Text(
+                      currencyFormatter.format(amountPaid),
+                      style: const TextStyle(
+                        fontSize: 16,
+                        fontWeight: FontWeight.w600,
+                        color: AppColors.success,
+                      ),
+                    ),
+                  ],
+                ),
+              )
+            else
+              Center(
+                child: Padding(
+                  padding: const EdgeInsets.symmetric(vertical: 20),
+                  child: Column(
+                    children: [
+                      Icon(
+                        Icons.receipt_long_outlined,
+                        size: 48,
+                        color: AppColors.grey100,
+                      ),
+                      const SizedBox(height: 12),
+                      const Text(
+                        'Chưa có lịch sử thanh toán',
+                        style: TextStyle(
+                          fontSize: 16,
+                          fontWeight: FontWeight.w600,
+                          color: AppColors.grey500,
+                        ),
+                      ),
+                      const SizedBox(height: 4),
+                      const Text(
+                        'Hóa đơn này chưa được thanh toán',
+                        style: TextStyle(
+                          fontSize: 14,
+                          color: AppColors.grey500,
+                        ),
+                      ),
+                    ],
+                  ),
+                ),
+              ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  /// Build download section
+  Widget _buildDownloadSection(String invoiceNumber) {
+    return Card(
+      elevation: 1,
+      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
+      child: Padding(
+        padding: const EdgeInsets.all(20),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            const Row(
+              children: [
+                Icon(Icons.download, color: AppColors.primaryBlue, size: 20),
+                SizedBox(width: 8),
+                Text(
+                  'Tải chứng từ',
+                  style: TextStyle(
+                    fontSize: 18,
+                    fontWeight: FontWeight.w700,
+                    color: AppColors.grey900,
+                  ),
+                ),
+              ],
+            ),
+            const SizedBox(height: 16),
+            _buildDownloadButton(
+              icon: Icons.picture_as_pdf,
+              label: 'Hóa đơn PDF',
+              onTap: () {
+                // TODO: Download invoice PDF
+              },
+            ),
+            const SizedBox(height: 12),
+            _buildDownloadButton(
+              icon: Icons.receipt,
+              label: 'Phiếu thu PDF',
+              onTap: () {
+                // TODO: Download receipt PDF
+              },
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  /// Build download button
+  Widget _buildDownloadButton({
+    required IconData icon,
+    required String label,
+    required VoidCallback onTap,
+  }) {
+    return InkWell(
+      onTap: onTap,
+      borderRadius: BorderRadius.circular(8),
+      child: Container(
+        padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 16),
+        decoration: BoxDecoration(
+          color: AppColors.grey50,
+          border: Border.all(color: AppColors.grey100),
+          borderRadius: BorderRadius.circular(8),
+        ),
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Icon(icon, size: 20, color: AppColors.grey500),
+            const SizedBox(width: 8),
+            Flexible(
+              child: Text(
+                label,
+                style: const TextStyle(
+                  fontSize: 14,
+                  fontWeight: FontWeight.w600,
+                  color: AppColors.grey500,
+                ),
+                textAlign: TextAlign.center,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  /// Build status badge
+  Widget _buildStatusBadge(InvoiceStatus status) {
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+      decoration: BoxDecoration(
+        color: _getStatusColor(status).withValues(alpha: 0.1),
+        borderRadius: BorderRadius.circular(20),
+        border: Border.all(
+          color: _getStatusColor(status).withValues(alpha: 0.3),
+          width: 1,
+        ),
+      ),
+      child: Text(
+        _getStatusText(status).toUpperCase(),
+        style: TextStyle(
+          fontSize: 14,
+          fontWeight: FontWeight.w700,
+          color: _getStatusColor(status),
+        ),
+      ),
+    );
+  }
+
+  /// Build summary row
+  Widget _buildSummaryRow(
+    String label,
+    String value, {
+    bool isHighlighted = false,
+    Color? valueColor,
+  }) {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+      children: [
+        Text(
+          label,
+          style: TextStyle(
+            fontSize: isHighlighted ? 18 : 16,
+            fontWeight: isHighlighted ? FontWeight.w700 : FontWeight.w400,
+            color: AppColors.grey500,
+          ),
+        ),
+        Text(
+          value,
+          style: TextStyle(
+            fontSize: isHighlighted ? 18 : 16,
+            fontWeight: isHighlighted ? FontWeight.w700 : FontWeight.w600,
+            color: valueColor ?? AppColors.grey900,
+          ),
+        ),
+      ],
+    );
+  }
+
+  /// Get status color
+  Color _getStatusColor(InvoiceStatus status) {
+    switch (status) {
+      case InvoiceStatus.draft:
+        return AppColors.grey500;
+      case InvoiceStatus.issued:
+        return const Color(0xFFF59E0B);
+      case InvoiceStatus.partiallyPaid:
+        return AppColors.info;
+      case InvoiceStatus.paid:
+        return AppColors.success;
+      case InvoiceStatus.overdue:
+        return AppColors.danger;
+      case InvoiceStatus.cancelled:
+        return AppColors.grey500;
+      case InvoiceStatus.refunded:
+        return const Color(0xFFF97316);
+    }
+  }
+
+  /// Get status text
+  String _getStatusText(InvoiceStatus status) {
+    switch (status) {
+      case InvoiceStatus.draft:
+        return 'Nháp';
+      case InvoiceStatus.issued:
+        return 'Chưa thanh toán';
+      case InvoiceStatus.partiallyPaid:
+        return 'Một phần';
+      case InvoiceStatus.paid:
+        return 'Đã thanh toán';
+      case InvoiceStatus.overdue:
+        return 'Quá hạn';
+      case InvoiceStatus.cancelled:
+        return 'Đã hủy';
+      case InvoiceStatus.refunded:
+        return 'Đã hoàn tiền';
+    }
+  }
+
+  /// Format date
+  String _formatDate(DateTime date) {
+    return DateFormat('dd/MM/yyyy').format(date);
+  }
+}

lib/features/orders/presentation/pages/payments_page.dart

@@ -0,0 +1,352 @@
+/// Page: Payments Page
+///
+/// Displays list of invoices/payments with tab filters.
+library;
+
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:go_router/go_router.dart';
+import 'package:worker/core/constants/ui_constants.dart';
+import 'package:worker/core/database/models/enums.dart';
+import 'package:worker/core/theme/colors.dart';
+import 'package:worker/features/orders/data/models/invoice_model.dart';
+import 'package:worker/features/orders/presentation/providers/invoices_provider.dart';
+import 'package:worker/features/orders/presentation/widgets/invoice_card.dart';
+
+/// Payments Page
+///
+/// Features:
+/// - Tab bar for invoice status filtering
+/// - List of invoice cards
+/// - Pull-to-refresh
+/// - Empty states for each tab
+class PaymentsPage extends ConsumerStatefulWidget {
+  const PaymentsPage({super.key});
+
+  @override
+  ConsumerState<PaymentsPage> createState() => _PaymentsPageState();
+}
+
+class _PaymentsPageState extends ConsumerState<PaymentsPage>
+    with SingleTickerProviderStateMixin {
+  late TabController _tabController;
+
+  final List<Map<String, String>> _tabs = [
+    {'key': 'all', 'label': 'Tất cả'},
+    {'key': 'unpaid', 'label': 'Chưa thanh toán'},
+    {'key': 'overdue', 'label': 'Quá hạn'},
+    {'key': 'paid', 'label': 'Đã thanh toán'},
+  ];
+
+  @override
+  void initState() {
+    super.initState();
+    _tabController = TabController(length: _tabs.length, vsync: this);
+    _tabController.addListener(_onTabChanged);
+  }
+
+  @override
+  void dispose() {
+    _tabController..removeListener(_onTabChanged)
+    ..dispose();
+    super.dispose();
+  }
+
+  void _onTabChanged() {
+    setState(() {}); // Rebuild to show filtered list
+  }
+
+  /// Filter invoices based on tab key
+  List<InvoiceModel> _filterInvoices(List<InvoiceModel> invoices, String tabKey) {
+    var filtered = List<InvoiceModel>.from(invoices);
+
+    switch (tabKey) {
+      case 'unpaid':
+        // Unpaid tab: issued status only
+        filtered = filtered
+            .where((invoice) => invoice.status == InvoiceStatus.issued && !invoice.isPaid)
+            .toList();
+        break;
+      case 'overdue':
+        // Overdue tab: overdue status
+        filtered = filtered
+            .where((invoice) => invoice.status == InvoiceStatus.overdue || invoice.isOverdue)
+            .toList();
+        break;
+      case 'paid':
+        // Paid tab: paid status
+        filtered = filtered
+            .where((invoice) => invoice.status == InvoiceStatus.paid || invoice.isPaid)
+            .toList();
+        break;
+      case 'all':
+      default:
+        // All tab: no filtering
+        break;
+    }
+
+    // Sort by issue date (newest first)
+    filtered.sort((a, b) => b.issueDate.compareTo(a.issueDate));
+
+    return filtered;
+  }
+
+  /// Get counts for each tab
+  Map<String, int> _getCounts(List<InvoiceModel> invoices) {
+    return {
+      'all': invoices.length,
+      'unpaid': invoices
+          .where((invoice) => invoice.status == InvoiceStatus.issued && !invoice.isPaid)
+          .length,
+      'overdue': invoices
+          .where((invoice) => invoice.status == InvoiceStatus.overdue || invoice.isOverdue)
+          .length,
+      'paid': invoices
+          .where((invoice) => invoice.status == InvoiceStatus.paid || invoice.isPaid)
+          .length,
+    };
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final invoicesAsync = ref.watch(invoicesProvider);
+
+    return invoicesAsync.when(
+      data: (allInvoices) {
+        final counts = _getCounts(allInvoices);
+
+        return Scaffold(
+          backgroundColor: const Color(0xFFF4F6F8),
+          appBar: AppBar(
+            leading: IconButton(
+              icon: const Icon(Icons.arrow_back, color: Colors.black),
+              onPressed: () => context.pop(),
+            ),
+            title: const Text(
+              'Thanh toán',
+              style: TextStyle(color: Colors.black),
+            ),
+            elevation: AppBarSpecs.elevation,
+            backgroundColor: AppColors.white,
+            foregroundColor: AppColors.grey900,
+            centerTitle: false,
+            bottom: TabBar(
+              controller: _tabController,
+              isScrollable: true,
+              tabAlignment: TabAlignment.start,
+              labelColor: AppColors.primaryBlue,
+              unselectedLabelColor: AppColors.grey500,
+              labelStyle: const TextStyle(
+                fontSize: 14,
+                fontWeight: FontWeight.w600,
+              ),
+              unselectedLabelStyle: const TextStyle(
+                fontSize: 14,
+                fontWeight: FontWeight.w400,
+              ),
+              indicatorColor: AppColors.primaryBlue,
+              indicatorWeight: 3,
+              tabs: _tabs.map((tab) {
+                final count = counts[tab['key']] ?? 0;
+                return Tab(
+                  child: Row(
+                    mainAxisSize: MainAxisSize.min,
+                    children: [
+                      Text(tab['label']!),
+                      const SizedBox(width: 6),
+                      Container(
+                        padding: const EdgeInsets.symmetric(
+                          horizontal: 6,
+                          vertical: 2,
+                        ),
+                        decoration: BoxDecoration(
+                          color: _tabController.index == _tabs.indexOf(tab)
+                              ? AppColors.primaryBlue.withValues(alpha: 0.1)
+                              : AppColors.grey100,
+                          borderRadius: BorderRadius.circular(10),
+                        ),
+                        child: Text(
+                          '$count',
+                          style: TextStyle(
+                            fontSize: 11,
+                            fontWeight: FontWeight.w600,
+                            color: _tabController.index == _tabs.indexOf(tab)
+                                ? AppColors.primaryBlue
+                                : AppColors.grey500,
+                          ),
+                        ),
+                      ),
+                    ],
+                  ),
+                );
+              }).toList(),
+            ),
+          ),
+          body: RefreshIndicator(
+            onRefresh: () async {
+              print('refresh');
+              await ref.read(invoicesProvider.notifier).refresh();
+            },
+            child: TabBarView(
+              controller: _tabController,
+              children: _tabs.map((tab) {
+                final filteredInvoices = _filterInvoices(allInvoices, tab['key']!);
+
+                return CustomScrollView(
+                  slivers: [
+                    // Invoices List
+                    SliverPadding(
+                      padding: const EdgeInsets.all(16),
+                      sliver: filteredInvoices.isEmpty
+                          ? _buildEmptyState(tab['label']!)
+                          : SliverList(
+                              delegate: SliverChildBuilderDelegate(
+                                (context, index) {
+                                  final invoice = filteredInvoices[index];
+                                  return InvoiceCard(
+                                    invoice: invoice,
+                                    onTap: () {
+                                      context.push('/payments/${invoice.invoiceId}');
+                                    },
+                                    onPaymentTap: () {
+                                      context.push('/payments/${invoice.invoiceId}');
+                                    },
+                                  );
+                                },
+                                childCount: filteredInvoices.length,
+                              ),
+                            ),
+                    ),
+                  ],
+                );
+              }).toList(),
+            ),
+          ),
+        );
+      },
+      loading: () => Scaffold(
+        backgroundColor: const Color(0xFFF4F6F8),
+        appBar: AppBar(
+          leading: IconButton(
+            icon: const Icon(Icons.arrow_back, color: Colors.black),
+            onPressed: () => context.pop(),
+          ),
+          title: const Text(
+            'Danh sách hoá đơn',
+            style: TextStyle(color: Colors.black),
+          ),
+          elevation: AppBarSpecs.elevation,
+          backgroundColor: AppColors.white,
+          foregroundColor: AppColors.grey900,
+          centerTitle: false,
+        ),
+        body: const Center(
+          child: CircularProgressIndicator(),
+        ),
+      ),
+      error: (error, stack) => Scaffold(
+        backgroundColor: const Color(0xFFF4F6F8),
+        appBar: AppBar(
+          leading: IconButton(
+            icon: const Icon(Icons.arrow_back, color: Colors.black),
+            onPressed: () => context.pop(),
+          ),
+          title: const Text(
+            'Danh sách hoá đơn',
+            style: TextStyle(color: Colors.black),
+          ),
+          elevation: AppBarSpecs.elevation,
+          backgroundColor: AppColors.white,
+          foregroundColor: AppColors.grey900,
+          centerTitle: false,
+        ),
+        body: Center(
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              Icon(
+                Icons.error_outline,
+                size: 80,
+                color: AppColors.danger.withValues(alpha: 0.7),
+              ),
+              const SizedBox(height: 16),
+              const Text(
+                'Có lỗi xảy ra',
+                style: TextStyle(
+                  fontSize: 18,
+                  fontWeight: FontWeight.w600,
+                  color: AppColors.grey900,
+                ),
+              ),
+              const SizedBox(height: 8),
+              Text(
+                error.toString(),
+                style: const TextStyle(
+                  fontSize: 14,
+                  color: AppColors.grey500,
+                ),
+                textAlign: TextAlign.center,
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  /// Build empty state
+  Widget _buildEmptyState(String tabLabel) {
+    String message;
+    IconData icon;
+
+    switch (tabLabel) {
+      case 'Chưa thanh toán':
+        message = 'Không có hóa đơn chưa thanh toán';
+        icon = Icons.receipt_long_outlined;
+        break;
+      case 'Quá hạn':
+        message = 'Không có hóa đơn quá hạn';
+        icon = Icons.warning_amber_outlined;
+        break;
+      case 'Đã thanh toán':
+        message = 'Không có hóa đơn đã thanh toán';
+        icon = Icons.check_circle_outline;
+        break;
+      default:
+        message = 'Không có hóa đơn nào';
+        icon = Icons.receipt_long_outlined;
+    }
+
+    return SliverFillRemaining(
+      child: Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Icon(
+              icon,
+              size: 80,
+              color: AppColors.grey500.withValues(alpha: 0.5),
+            ),
+            const SizedBox(height: 16),
+            Text(
+              message,
+              style: const TextStyle(
+                fontSize: 18,
+                fontWeight: FontWeight.w600,
+                color: AppColors.grey500,
+              ),
+            ),
+            const SizedBox(height: 8),
+            const Text(
+              'Kéo xuống để làm mới',
+              style: TextStyle(
+                fontSize: 14,
+                color: AppColors.grey500,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/features/orders/presentation/providers/invoices_provider.dart

@@ -0,0 +1,168 @@
+/// Providers: Invoices
+///
+/// Riverpod providers for managing invoices state.
+library;
+
+import 'package:riverpod_annotation/riverpod_annotation.dart';
+import 'package:worker/core/database/models/enums.dart';
+import 'package:worker/features/orders/data/datasources/invoices_local_datasource.dart';
+import 'package:worker/features/orders/data/models/invoice_model.dart';
+
+part 'invoices_provider.g.dart';
+
+/// Invoices Local Data Source Provider
+@riverpod
+InvoicesLocalDataSource invoicesLocalDataSource(Ref ref) {
+  return InvoicesLocalDataSource();
+}
+
+/// Invoices Provider
+///
+/// Provides list of all invoices from local data source.
+@riverpod
+class Invoices extends _$Invoices {
+  @override
+  Future<List<InvoiceModel>> build() async {
+    return await ref.read(invoicesLocalDataSourceProvider).getAllInvoices();
+  }
+
+  /// Refresh invoices
+  Future<void> refresh() async {
+    state = const AsyncValue.loading();
+    state = await AsyncValue.guard(() async {
+      return await ref.read(invoicesLocalDataSourceProvider).getAllInvoices();
+    });
+  }
+}
+
+/// Selected Invoice Status Filter Provider
+///
+/// Tracks the currently selected invoice status filter for tabs.
+/// null means "All" invoices.
+@riverpod
+class SelectedInvoiceStatusFilter extends _$SelectedInvoiceStatusFilter {
+  @override
+  String? build() {
+    return null; // Default: show all invoices
+  }
+
+  /// Select a status filter
+  void selectStatus(String? status) {
+    state = status;
+  }
+
+  /// Clear selection (show all)
+  void clearSelection() {
+    state = null;
+  }
+}
+
+/// Filtered Invoices Provider
+///
+/// Filters invoices by selected status tab.
+@riverpod
+Future<List<InvoiceModel>> filteredInvoices(Ref ref) async {
+  final invoicesAsync = ref.watch(invoicesProvider);
+  final selectedStatus = ref.watch(selectedInvoiceStatusFilterProvider);
+
+  return invoicesAsync.when(
+    data: (invoices) {
+      var filtered = invoices;
+
+      // Filter by status tab
+      if (selectedStatus != null) {
+        if (selectedStatus == 'unpaid') {
+          // Unpaid tab: issued status only
+          filtered = filtered
+              .where((invoice) => invoice.status == InvoiceStatus.issued && !invoice.isPaid)
+              .toList();
+        } else if (selectedStatus == 'overdue') {
+          // Overdue tab: overdue status
+          filtered = filtered
+              .where((invoice) => invoice.status == InvoiceStatus.overdue || invoice.isOverdue)
+              .toList();
+        } else if (selectedStatus == 'paid') {
+          // Paid tab: paid status
+          filtered = filtered
+              .where((invoice) => invoice.status == InvoiceStatus.paid || invoice.isPaid)
+              .toList();
+        }
+      }
+
+      // Sort by issue date (newest first)
+      filtered.sort((a, b) => b.issueDate.compareTo(a.issueDate));
+
+      return filtered;
+    },
+    loading: () => [],
+    error: (error, stack) => [],
+  );
+}
+
+/// Invoices Count by Status Provider
+///
+/// Returns count of invoices for each status tab.
+@riverpod
+Future<Map<String, int>> invoicesCountByStatus(Ref ref) async {
+  final invoicesAsync = ref.watch(invoicesProvider);
+
+  return invoicesAsync.when(
+    data: (invoices) {
+      final counts = <String, int>{};
+
+      // All tab
+      counts['all'] = invoices.length;
+
+      // Unpaid tab (issued status)
+      counts['unpaid'] = invoices
+          .where((invoice) => invoice.status == InvoiceStatus.issued && !invoice.isPaid)
+          .length;
+
+      // Overdue tab
+      counts['overdue'] = invoices
+          .where((invoice) => invoice.status == InvoiceStatus.overdue || invoice.isOverdue)
+          .length;
+
+      // Paid tab
+      counts['paid'] = invoices
+          .where((invoice) => invoice.status == InvoiceStatus.paid || invoice.isPaid)
+          .length;
+
+      return counts;
+    },
+    loading: () => {},
+    error: (error, stack) => {},
+  );
+}
+
+/// Total Invoices Amount Provider
+///
+/// Returns total amount of all invoices.
+@riverpod
+Future<double> totalInvoicesAmount(Ref ref) async {
+  final invoicesAsync = ref.watch(invoicesProvider);
+
+  return invoicesAsync.when(
+    data: (invoices) {
+      return invoices.fold<double>(0.0, (sum, invoice) => sum + invoice.totalAmount);
+    },
+    loading: () => 0.0,
+    error: (error, stack) => 0.0,
+  );
+}
+
+/// Total Unpaid Amount Provider
+///
+/// Returns total amount remaining across all unpaid invoices.
+@riverpod
+Future<double> totalUnpaidAmount(Ref ref) async {
+  final invoicesAsync = ref.watch(invoicesProvider);
+
+  return invoicesAsync.when(
+    data: (invoices) {
+      return invoices.fold<double>(0.0, (sum, invoice) => sum + invoice.amountRemaining);
+    },
+    loading: () => 0.0,
+    error: (error, stack) => 0.0,
+  );
+}

lib/features/orders/presentation/providers/invoices_provider.g.dart

@@ -0,0 +1,387 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'invoices_provider.dart';
+
+// **************************************************************************
+// RiverpodGenerator
+// **************************************************************************
+
+// GENERATED CODE - DO NOT MODIFY BY HAND
+// ignore_for_file: type=lint, type=warning
+/// Invoices Local Data Source Provider
+
+@ProviderFor(invoicesLocalDataSource)
+const invoicesLocalDataSourceProvider = InvoicesLocalDataSourceProvider._();
+
+/// Invoices Local Data Source Provider
+
+final class InvoicesLocalDataSourceProvider
+    extends
+        $FunctionalProvider<
+          InvoicesLocalDataSource,
+          InvoicesLocalDataSource,
+          InvoicesLocalDataSource
+        >
+    with $Provider<InvoicesLocalDataSource> {
+  /// Invoices Local Data Source Provider
+  const InvoicesLocalDataSourceProvider._()
+    : super(
+        from: null,
+        argument: null,
+        retry: null,
+        name: r'invoicesLocalDataSourceProvider',
+        isAutoDispose: true,
+        dependencies: null,
+        $allTransitiveDependencies: null,
+      );
+
+  @override
+  String debugGetCreateSourceHash() => _$invoicesLocalDataSourceHash();
+
+  @$internal
+  @override
+  $ProviderElement<InvoicesLocalDataSource> $createElement(
+    $ProviderPointer pointer,
+  ) => $ProviderElement(pointer);
+
+  @override
+  InvoicesLocalDataSource create(Ref ref) {
+    return invoicesLocalDataSource(ref);
+  }
+
+  /// {@macro riverpod.override_with_value}
+  Override overrideWithValue(InvoicesLocalDataSource value) {
+    return $ProviderOverride(
+      origin: this,
+      providerOverride: $SyncValueProvider<InvoicesLocalDataSource>(value),
+    );
+  }
+}
+
+String _$invoicesLocalDataSourceHash() =>
+    r'1fd77b210353e5527515abb2e8d53a4771f9320b';
+
+/// Invoices Provider
+///
+/// Provides list of all invoices from local data source.
+
+@ProviderFor(Invoices)
+const invoicesProvider = InvoicesProvider._();
+
+/// Invoices Provider
+///
+/// Provides list of all invoices from local data source.
+final class InvoicesProvider
+    extends $AsyncNotifierProvider<Invoices, List<InvoiceModel>> {
+  /// Invoices Provider
+  ///
+  /// Provides list of all invoices from local data source.
+  const InvoicesProvider._()
+    : super(
+        from: null,
+        argument: null,
+        retry: null,
+        name: r'invoicesProvider',
+        isAutoDispose: true,
+        dependencies: null,
+        $allTransitiveDependencies: null,
+      );
+
+  @override
+  String debugGetCreateSourceHash() => _$invoicesHash();
+
+  @$internal
+  @override
+  Invoices create() => Invoices();
+}
+
+String _$invoicesHash() => r'8a0d534b4fbb0367f9727f1baa3d48339cf44ab6';
+
+/// Invoices Provider
+///
+/// Provides list of all invoices from local data source.
+
+abstract class _$Invoices extends $AsyncNotifier<List<InvoiceModel>> {
+  FutureOr<List<InvoiceModel>> build();
+  @$mustCallSuper
+  @override
+  void runBuild() {
+    final created = build();
+    final ref =
+        this.ref as $Ref<AsyncValue<List<InvoiceModel>>, List<InvoiceModel>>;
+    final element =
+        ref.element
+            as $ClassProviderElement<
+              AnyNotifier<AsyncValue<List<InvoiceModel>>, List<InvoiceModel>>,
+              AsyncValue<List<InvoiceModel>>,
+              Object?,
+              Object?
+            >;
+    element.handleValue(ref, created);
+  }
+}
+
+/// Selected Invoice Status Filter Provider
+///
+/// Tracks the currently selected invoice status filter for tabs.
+/// null means "All" invoices.
+
+@ProviderFor(SelectedInvoiceStatusFilter)
+const selectedInvoiceStatusFilterProvider =
+    SelectedInvoiceStatusFilterProvider._();
+
+/// Selected Invoice Status Filter Provider
+///
+/// Tracks the currently selected invoice status filter for tabs.
+/// null means "All" invoices.
+final class SelectedInvoiceStatusFilterProvider
+    extends $NotifierProvider<SelectedInvoiceStatusFilter, String?> {
+  /// Selected Invoice Status Filter Provider
+  ///
+  /// Tracks the currently selected invoice status filter for tabs.
+  /// null means "All" invoices.
+  const SelectedInvoiceStatusFilterProvider._()
+    : super(
+        from: null,
+        argument: null,
+        retry: null,
+        name: r'selectedInvoiceStatusFilterProvider',
+        isAutoDispose: true,
+        dependencies: null,
+        $allTransitiveDependencies: null,
+      );
+
+  @override
+  String debugGetCreateSourceHash() => _$selectedInvoiceStatusFilterHash();
+
+  @$internal
+  @override
+  SelectedInvoiceStatusFilter create() => SelectedInvoiceStatusFilter();
+
+  /// {@macro riverpod.override_with_value}
+  Override overrideWithValue(String? value) {
+    return $ProviderOverride(
+      origin: this,
+      providerOverride: $SyncValueProvider<String?>(value),
+    );
+  }
+}
+
+String _$selectedInvoiceStatusFilterHash() =>
+    r'677627b34d7754c224b53a03ef61c8da13dee26a';
+
+/// Selected Invoice Status Filter Provider
+///
+/// Tracks the currently selected invoice status filter for tabs.
+/// null means "All" invoices.
+
+abstract class _$SelectedInvoiceStatusFilter extends $Notifier<String?> {
+  String? build();
+  @$mustCallSuper
+  @override
+  void runBuild() {
+    final created = build();
+    final ref = this.ref as $Ref<String?, String?>;
+    final element =
+        ref.element
+            as $ClassProviderElement<
+              AnyNotifier<String?, String?>,
+              String?,
+              Object?,
+              Object?
+            >;
+    element.handleValue(ref, created);
+  }
+}
+
+/// Filtered Invoices Provider
+///
+/// Filters invoices by selected status tab.
+
+@ProviderFor(filteredInvoices)
+const filteredInvoicesProvider = FilteredInvoicesProvider._();
+
+/// Filtered Invoices Provider
+///
+/// Filters invoices by selected status tab.
+
+final class FilteredInvoicesProvider
+    extends
+        $FunctionalProvider<
+          AsyncValue<List<InvoiceModel>>,
+          List<InvoiceModel>,
+          FutureOr<List<InvoiceModel>>
+        >
+    with
+        $FutureModifier<List<InvoiceModel>>,
+        $FutureProvider<List<InvoiceModel>> {
+  /// Filtered Invoices Provider
+  ///
+  /// Filters invoices by selected status tab.
+  const FilteredInvoicesProvider._()
+    : super(
+        from: null,
+        argument: null,
+        retry: null,
+        name: r'filteredInvoicesProvider',
+        isAutoDispose: true,
+        dependencies: null,
+        $allTransitiveDependencies: null,
+      );
+
+  @override
+  String debugGetCreateSourceHash() => _$filteredInvoicesHash();
+
+  @$internal
+  @override
+  $FutureProviderElement<List<InvoiceModel>> $createElement(
+    $ProviderPointer pointer,
+  ) => $FutureProviderElement(pointer);
+
+  @override
+  FutureOr<List<InvoiceModel>> create(Ref ref) {
+    return filteredInvoices(ref);
+  }
+}
+
+String _$filteredInvoicesHash() => r'778c8762e13c620d48e21d240c397f13c03de00e';
+
+/// Invoices Count by Status Provider
+///
+/// Returns count of invoices for each status tab.
+
+@ProviderFor(invoicesCountByStatus)
+const invoicesCountByStatusProvider = InvoicesCountByStatusProvider._();
+
+/// Invoices Count by Status Provider
+///
+/// Returns count of invoices for each status tab.
+
+final class InvoicesCountByStatusProvider
+    extends
+        $FunctionalProvider<
+          AsyncValue<Map<String, int>>,
+          Map<String, int>,
+          FutureOr<Map<String, int>>
+        >
+    with $FutureModifier<Map<String, int>>, $FutureProvider<Map<String, int>> {
+  /// Invoices Count by Status Provider
+  ///
+  /// Returns count of invoices for each status tab.
+  const InvoicesCountByStatusProvider._()
+    : super(
+        from: null,
+        argument: null,
+        retry: null,
+        name: r'invoicesCountByStatusProvider',
+        isAutoDispose: true,
+        dependencies: null,
+        $allTransitiveDependencies: null,
+      );
+
+  @override
+  String debugGetCreateSourceHash() => _$invoicesCountByStatusHash();
+
+  @$internal
+  @override
+  $FutureProviderElement<Map<String, int>> $createElement(
+    $ProviderPointer pointer,
+  ) => $FutureProviderElement(pointer);
+
+  @override
+  FutureOr<Map<String, int>> create(Ref ref) {
+    return invoicesCountByStatus(ref);
+  }
+}
+
+String _$invoicesCountByStatusHash() =>
+    r'c21acf5db26120dc6b4bb27e9c1f84eebe315b59';
+
+/// Total Invoices Amount Provider
+///
+/// Returns total amount of all invoices.
+
+@ProviderFor(totalInvoicesAmount)
+const totalInvoicesAmountProvider = TotalInvoicesAmountProvider._();
+
+/// Total Invoices Amount Provider
+///
+/// Returns total amount of all invoices.
+
+final class TotalInvoicesAmountProvider
+    extends $FunctionalProvider<AsyncValue<double>, double, FutureOr<double>>
+    with $FutureModifier<double>, $FutureProvider<double> {
+  /// Total Invoices Amount Provider
+  ///
+  /// Returns total amount of all invoices.
+  const TotalInvoicesAmountProvider._()
+    : super(
+        from: null,
+        argument: null,
+        retry: null,
+        name: r'totalInvoicesAmountProvider',
+        isAutoDispose: true,
+        dependencies: null,
+        $allTransitiveDependencies: null,
+      );
+
+  @override
+  String debugGetCreateSourceHash() => _$totalInvoicesAmountHash();
+
+  @$internal
+  @override
+  $FutureProviderElement<double> $createElement($ProviderPointer pointer) =>
+      $FutureProviderElement(pointer);
+
+  @override
+  FutureOr<double> create(Ref ref) {
+    return totalInvoicesAmount(ref);
+  }
+}
+
+String _$totalInvoicesAmountHash() =>
+    r'7800e2be935dfe91d382957539b151bbf4f936fe';
+
+/// Total Unpaid Amount Provider
+///
+/// Returns total amount remaining across all unpaid invoices.
+
+@ProviderFor(totalUnpaidAmount)
+const totalUnpaidAmountProvider = TotalUnpaidAmountProvider._();
+
+/// Total Unpaid Amount Provider
+///
+/// Returns total amount remaining across all unpaid invoices.
+
+final class TotalUnpaidAmountProvider
+    extends $FunctionalProvider<AsyncValue<double>, double, FutureOr<double>>
+    with $FutureModifier<double>, $FutureProvider<double> {
+  /// Total Unpaid Amount Provider
+  ///
+  /// Returns total amount remaining across all unpaid invoices.
+  const TotalUnpaidAmountProvider._()
+    : super(
+        from: null,
+        argument: null,
+        retry: null,
+        name: r'totalUnpaidAmountProvider',
+        isAutoDispose: true,
+        dependencies: null,
+        $allTransitiveDependencies: null,
+      );
+
+  @override
+  String debugGetCreateSourceHash() => _$totalUnpaidAmountHash();
+
+  @$internal
+  @override
+  $FutureProviderElement<double> $createElement($ProviderPointer pointer) =>
+      $FutureProviderElement(pointer);
+
+  @override
+  FutureOr<double> create(Ref ref) {
+    return totalUnpaidAmount(ref);
+  }
+}
+
+String _$totalUnpaidAmountHash() => r'9a81800149d8809e1c3be065bc3c5357792c4aee';

lib/features/orders/presentation/providers/orders_provider.dart

@@ -0,0 +1,154 @@
+/// Providers: Orders
+///
+/// Riverpod providers for managing orders state.
+library;
+
+import 'package:riverpod_annotation/riverpod_annotation.dart';
+import 'package:worker/core/database/models/enums.dart';
+import 'package:worker/features/orders/data/datasources/orders_local_datasource.dart';
+import 'package:worker/features/orders/data/models/order_model.dart';
+
+part 'orders_provider.g.dart';
+
+/// Orders Local Data Source Provider
+@riverpod
+OrdersLocalDataSource ordersLocalDataSource(Ref ref) {
+  return OrdersLocalDataSource();
+}
+
+/// Orders Provider
+///
+/// Provides list of all orders from local data source.
+@riverpod
+class Orders extends _$Orders {
+  @override
+  Future<List<OrderModel>> build() async {
+    return await ref.read(ordersLocalDataSourceProvider).getAllOrders();
+  }
+
+  /// Refresh orders
+  Future<void> refresh() async {
+    state = const AsyncValue.loading();
+    state = await AsyncValue.guard(() async {
+      return await ref.read(ordersLocalDataSourceProvider).getAllOrders();
+    });
+  }
+}
+
+/// Selected Order Status Provider
+///
+/// Tracks the currently selected order status filter.
+/// null means "All" orders.
+@riverpod
+class SelectedOrderStatus extends _$SelectedOrderStatus {
+  @override
+  OrderStatus? build() {
+    return null; // Default: show all orders
+  }
+
+  /// Select a status filter
+  void selectStatus(OrderStatus? status) {
+    state = status;
+  }
+
+  /// Clear selection (show all)
+  void clearSelection() {
+    state = null;
+  }
+}
+
+/// Order Search Query Provider
+///
+/// Tracks the current search query for order numbers.
+@riverpod
+class OrderSearchQuery extends _$OrderSearchQuery {
+  @override
+  String build() {
+    return '';
+  }
+
+  /// Update search query
+  void updateQuery(String query) {
+    state = query;
+  }
+
+  /// Clear search query
+  void clearQuery() {
+    state = '';
+  }
+}
+
+/// Filtered Orders Provider
+///
+/// Filters orders by selected status and search query.
+@riverpod
+Future<List<OrderModel>> filteredOrders(Ref ref) async {
+  final ordersAsync = ref.watch(ordersProvider);
+  final selectedStatus = ref.watch(selectedOrderStatusProvider);
+  final searchQuery = ref.watch(orderSearchQueryProvider);
+
+  return ordersAsync.when(
+    data: (orders) {
+      var filtered = orders;
+
+      // Filter by status
+      if (selectedStatus != null) {
+        filtered = filtered
+            .where((order) => order.status == selectedStatus)
+            .toList();
+      }
+
+      // Filter by search query
+      if (searchQuery.isNotEmpty) {
+        filtered = filtered
+            .where(
+              (order) => order.orderNumber
+                  .toLowerCase()
+                  .contains(searchQuery.toLowerCase()),
+            )
+            .toList();
+      }
+
+      // Sort by creation date (newest first)
+      filtered.sort((a, b) => b.createdAt.compareTo(a.createdAt));
+
+      return filtered;
+    },
+    loading: () => [],
+    error: (error, stack) => [],
+  );
+}
+
+/// Orders Count by Status Provider
+///
+/// Returns count of orders for each status.
+@riverpod
+Future<Map<OrderStatus, int>> ordersCountByStatus(Ref ref) async {
+  final ordersAsync = ref.watch(ordersProvider);
+
+  return ordersAsync.when(
+    data: (orders) {
+      final counts = <OrderStatus, int>{};
+
+      for (final status in OrderStatus.values) {
+        counts[status] = orders.where((order) => order.status == status).length;
+      }
+
+      return counts;
+    },
+    loading: () => {},
+    error: (error, stack) => {},
+  );
+}
+
+/// Total Orders Count Provider
+@riverpod
+Future<int> totalOrdersCount(Ref ref) async {
+  final ordersAsync = ref.watch(ordersProvider);
+
+  return ordersAsync.when(
+    data: (orders) => orders.length,
+    loading: () => 0,
+    error: (error, stack) => 0,
+  );
+}

lib/features/orders/presentation/providers/orders_provider.g.dart

@@ -0,0 +1,402 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'orders_provider.dart';
+
+// **************************************************************************
+// RiverpodGenerator
+// **************************************************************************
+
+// GENERATED CODE - DO NOT MODIFY BY HAND
+// ignore_for_file: type=lint, type=warning
+/// Orders Local Data Source Provider
+
+@ProviderFor(ordersLocalDataSource)
+const ordersLocalDataSourceProvider = OrdersLocalDataSourceProvider._();
+
+/// Orders Local Data Source Provider
+
+final class OrdersLocalDataSourceProvider
+    extends
+        $FunctionalProvider<
+          OrdersLocalDataSource,
+          OrdersLocalDataSource,
+          OrdersLocalDataSource
+        >
+    with $Provider<OrdersLocalDataSource> {
+  /// Orders Local Data Source Provider
+  const OrdersLocalDataSourceProvider._()
+    : super(
+        from: null,
+        argument: null,
+        retry: null,
+        name: r'ordersLocalDataSourceProvider',
+        isAutoDispose: true,
+        dependencies: null,
+        $allTransitiveDependencies: null,
+      );
+
+  @override
+  String debugGetCreateSourceHash() => _$ordersLocalDataSourceHash();
+
+  @$internal
+  @override
+  $ProviderElement<OrdersLocalDataSource> $createElement(
+    $ProviderPointer pointer,
+  ) => $ProviderElement(pointer);
+
+  @override
+  OrdersLocalDataSource create(Ref ref) {
+    return ordersLocalDataSource(ref);
+  }
+
+  /// {@macro riverpod.override_with_value}
+  Override overrideWithValue(OrdersLocalDataSource value) {
+    return $ProviderOverride(
+      origin: this,
+      providerOverride: $SyncValueProvider<OrdersLocalDataSource>(value),
+    );
+  }
+}
+
+String _$ordersLocalDataSourceHash() =>
+    r'753fcc2a4000c4c9843fba022d1bf398daba6c7a';
+
+/// Orders Provider
+///
+/// Provides list of all orders from local data source.
+
+@ProviderFor(Orders)
+const ordersProvider = OrdersProvider._();
+
+/// Orders Provider
+///
+/// Provides list of all orders from local data source.
+final class OrdersProvider
+    extends $AsyncNotifierProvider<Orders, List<OrderModel>> {
+  /// Orders Provider
+  ///
+  /// Provides list of all orders from local data source.
+  const OrdersProvider._()
+    : super(
+        from: null,
+        argument: null,
+        retry: null,
+        name: r'ordersProvider',
+        isAutoDispose: true,
+        dependencies: null,
+        $allTransitiveDependencies: null,
+      );
+
+  @override
+  String debugGetCreateSourceHash() => _$ordersHash();
+
+  @$internal
+  @override
+  Orders create() => Orders();
+}
+
+String _$ordersHash() => r'7d2ae33e528260172495e8360f6879cb6e089766';
+
+/// Orders Provider
+///
+/// Provides list of all orders from local data source.
+
+abstract class _$Orders extends $AsyncNotifier<List<OrderModel>> {
+  FutureOr<List<OrderModel>> build();
+  @$mustCallSuper
+  @override
+  void runBuild() {
+    final created = build();
+    final ref =
+        this.ref as $Ref<AsyncValue<List<OrderModel>>, List<OrderModel>>;
+    final element =
+        ref.element
+            as $ClassProviderElement<
+              AnyNotifier<AsyncValue<List<OrderModel>>, List<OrderModel>>,
+              AsyncValue<List<OrderModel>>,
+              Object?,
+              Object?
+            >;
+    element.handleValue(ref, created);
+  }
+}
+
+/// Selected Order Status Provider
+///
+/// Tracks the currently selected order status filter.
+/// null means "All" orders.
+
+@ProviderFor(SelectedOrderStatus)
+const selectedOrderStatusProvider = SelectedOrderStatusProvider._();
+
+/// Selected Order Status Provider
+///
+/// Tracks the currently selected order status filter.
+/// null means "All" orders.
+final class SelectedOrderStatusProvider
+    extends $NotifierProvider<SelectedOrderStatus, OrderStatus?> {
+  /// Selected Order Status Provider
+  ///
+  /// Tracks the currently selected order status filter.
+  /// null means "All" orders.
+  const SelectedOrderStatusProvider._()
+    : super(
+        from: null,
+        argument: null,
+        retry: null,
+        name: r'selectedOrderStatusProvider',
+        isAutoDispose: true,
+        dependencies: null,
+        $allTransitiveDependencies: null,
+      );
+
+  @override
+  String debugGetCreateSourceHash() => _$selectedOrderStatusHash();
+
+  @$internal
+  @override
+  SelectedOrderStatus create() => SelectedOrderStatus();
+
+  /// {@macro riverpod.override_with_value}
+  Override overrideWithValue(OrderStatus? value) {
+    return $ProviderOverride(
+      origin: this,
+      providerOverride: $SyncValueProvider<OrderStatus?>(value),
+    );
+  }
+}
+
+String _$selectedOrderStatusHash() =>
+    r'51834a8660a7f792e4075f76354e8a23a4fe9d7c';
+
+/// Selected Order Status Provider
+///
+/// Tracks the currently selected order status filter.
+/// null means "All" orders.
+
+abstract class _$SelectedOrderStatus extends $Notifier<OrderStatus?> {
+  OrderStatus? build();
+  @$mustCallSuper
+  @override
+  void runBuild() {
+    final created = build();
+    final ref = this.ref as $Ref<OrderStatus?, OrderStatus?>;
+    final element =
+        ref.element
+            as $ClassProviderElement<
+              AnyNotifier<OrderStatus?, OrderStatus?>,
+              OrderStatus?,
+              Object?,
+              Object?
+            >;
+    element.handleValue(ref, created);
+  }
+}
+
+/// Order Search Query Provider
+///
+/// Tracks the current search query for order numbers.
+
+@ProviderFor(OrderSearchQuery)
+const orderSearchQueryProvider = OrderSearchQueryProvider._();
+
+/// Order Search Query Provider
+///
+/// Tracks the current search query for order numbers.
+final class OrderSearchQueryProvider
+    extends $NotifierProvider<OrderSearchQuery, String> {
+  /// Order Search Query Provider
+  ///
+  /// Tracks the current search query for order numbers.
+  const OrderSearchQueryProvider._()
+    : super(
+        from: null,
+        argument: null,
+        retry: null,
+        name: r'orderSearchQueryProvider',
+        isAutoDispose: true,
+        dependencies: null,
+        $allTransitiveDependencies: null,
+      );
+
+  @override
+  String debugGetCreateSourceHash() => _$orderSearchQueryHash();
+
+  @$internal
+  @override
+  OrderSearchQuery create() => OrderSearchQuery();
+
+  /// {@macro riverpod.override_with_value}
+  Override overrideWithValue(String value) {
+    return $ProviderOverride(
+      origin: this,
+      providerOverride: $SyncValueProvider<String>(value),
+    );
+  }
+}
+
+String _$orderSearchQueryHash() => r'4f60c2a1ac8c0ce515bc807781fa3813e9934482';
+
+/// Order Search Query Provider
+///
+/// Tracks the current search query for order numbers.
+
+abstract class _$OrderSearchQuery extends $Notifier<String> {
+  String build();
+  @$mustCallSuper
+  @override
+  void runBuild() {
+    final created = build();
+    final ref = this.ref as $Ref<String, String>;
+    final element =
+        ref.element
+            as $ClassProviderElement<
+              AnyNotifier<String, String>,
+              String,
+              Object?,
+              Object?
+            >;
+    element.handleValue(ref, created);
+  }
+}
+
+/// Filtered Orders Provider
+///
+/// Filters orders by selected status and search query.
+
+@ProviderFor(filteredOrders)
+const filteredOrdersProvider = FilteredOrdersProvider._();
+
+/// Filtered Orders Provider
+///
+/// Filters orders by selected status and search query.
+
+final class FilteredOrdersProvider
+    extends
+        $FunctionalProvider<
+          AsyncValue<List<OrderModel>>,
+          List<OrderModel>,
+          FutureOr<List<OrderModel>>
+        >
+    with $FutureModifier<List<OrderModel>>, $FutureProvider<List<OrderModel>> {
+  /// Filtered Orders Provider
+  ///
+  /// Filters orders by selected status and search query.
+  const FilteredOrdersProvider._()
+    : super(
+        from: null,
+        argument: null,
+        retry: null,
+        name: r'filteredOrdersProvider',
+        isAutoDispose: true,
+        dependencies: null,
+        $allTransitiveDependencies: null,
+      );
+
+  @override
+  String debugGetCreateSourceHash() => _$filteredOrdersHash();
+
+  @$internal
+  @override
+  $FutureProviderElement<List<OrderModel>> $createElement(
+    $ProviderPointer pointer,
+  ) => $FutureProviderElement(pointer);
+
+  @override
+  FutureOr<List<OrderModel>> create(Ref ref) {
+    return filteredOrders(ref);
+  }
+}
+
+String _$filteredOrdersHash() => r'4cc009352d3b09159c0fe107645634c3a4a81a7c';
+
+/// Orders Count by Status Provider
+///
+/// Returns count of orders for each status.
+
+@ProviderFor(ordersCountByStatus)
+const ordersCountByStatusProvider = OrdersCountByStatusProvider._();
+
+/// Orders Count by Status Provider
+///
+/// Returns count of orders for each status.
+
+final class OrdersCountByStatusProvider
+    extends
+        $FunctionalProvider<
+          AsyncValue<Map<OrderStatus, int>>,
+          Map<OrderStatus, int>,
+          FutureOr<Map<OrderStatus, int>>
+        >
+    with
+        $FutureModifier<Map<OrderStatus, int>>,
+        $FutureProvider<Map<OrderStatus, int>> {
+  /// Orders Count by Status Provider
+  ///
+  /// Returns count of orders for each status.
+  const OrdersCountByStatusProvider._()
+    : super(
+        from: null,
+        argument: null,
+        retry: null,
+        name: r'ordersCountByStatusProvider',
+        isAutoDispose: true,
+        dependencies: null,
+        $allTransitiveDependencies: null,
+      );
+
+  @override
+  String debugGetCreateSourceHash() => _$ordersCountByStatusHash();
+
+  @$internal
+  @override
+  $FutureProviderElement<Map<OrderStatus, int>> $createElement(
+    $ProviderPointer pointer,
+  ) => $FutureProviderElement(pointer);
+
+  @override
+  FutureOr<Map<OrderStatus, int>> create(Ref ref) {
+    return ordersCountByStatus(ref);
+  }
+}
+
+String _$ordersCountByStatusHash() =>
+    r'85fe4fb85410855bb434b19fdc05c933c6e76235';
+
+/// Total Orders Count Provider
+
+@ProviderFor(totalOrdersCount)
+const totalOrdersCountProvider = TotalOrdersCountProvider._();
+
+/// Total Orders Count Provider
+
+final class TotalOrdersCountProvider
+    extends $FunctionalProvider<AsyncValue<int>, int, FutureOr<int>>
+    with $FutureModifier<int>, $FutureProvider<int> {
+  /// Total Orders Count Provider
+  const TotalOrdersCountProvider._()
+    : super(
+        from: null,
+        argument: null,
+        retry: null,
+        name: r'totalOrdersCountProvider',
+        isAutoDispose: true,
+        dependencies: null,
+        $allTransitiveDependencies: null,
+      );
+
+  @override
+  String debugGetCreateSourceHash() => _$totalOrdersCountHash();
+
+  @$internal
+  @override
+  $FutureProviderElement<int> $createElement($ProviderPointer pointer) =>
+      $FutureProviderElement(pointer);
+
+  @override
+  FutureOr<int> create(Ref ref) {
+    return totalOrdersCount(ref);
+  }
+}
+
+String _$totalOrdersCountHash() => r'ec1ab3a8d432033aa1f02d28e841e78eba06d63e';

lib/features/orders/presentation/widgets/invoice_card.dart

@@ -0,0 +1,321 @@
+/// Widget: Invoice Card
+///
+/// Displays invoice information in a card format.
+library;
+
+import 'package:flutter/material.dart';
+import 'package:intl/intl.dart';
+import 'package:worker/core/database/models/enums.dart';
+import 'package:worker/core/theme/colors.dart';
+import 'package:worker/features/orders/data/models/invoice_model.dart';
+
+/// Invoice Card Widget
+///
+/// Displays invoice details in a card with status indicator and payment summary.
+class InvoiceCard extends StatelessWidget {
+  /// Invoice to display
+  final InvoiceModel invoice;
+
+  /// Tap callback
+  final VoidCallback? onTap;
+
+  /// Payment button callback
+  final VoidCallback? onPaymentTap;
+
+  const InvoiceCard({
+    required this.invoice,
+    this.onTap,
+    this.onPaymentTap,
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final currencyFormatter = NumberFormat.currency(
+      locale: 'vi_VN',
+      symbol: 'đ',
+      decimalDigits: 0,
+    );
+
+    return Card(
+      margin: const EdgeInsets.only(bottom: 12),
+      elevation: 1,
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(12),
+      ),
+      clipBehavior: Clip.antiAlias,
+      child: InkWell(
+        onTap: onTap,
+        child: Padding(
+          padding: const EdgeInsets.all(16),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              // Invoice number and Order ID row
+              Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      // Invoice number
+                      Text(
+                        'Mã hoá đơn #${invoice.invoiceNumber}',
+                        style: const TextStyle(
+                          fontSize: 16,
+                          fontWeight: FontWeight.w700,
+                          color: AppColors.grey900,
+                        ),
+                      ),
+                      const SizedBox(height: 4),
+                      // Order ID
+                      if (invoice.orderId != null)
+                        Text(
+                          'Đơn hàng: #${invoice.orderId}',
+                          style: const TextStyle(
+                            fontSize: 12,
+                            color: AppColors.grey500,
+                          ),
+                        ),
+                    ],
+                  ),
+
+                  // Status badge
+                  _buildStatusBadge(),
+                ],
+              ),
+
+              const SizedBox(height: 12),
+
+              // Invoice dates
+              _buildDetailRow(
+                'Ngày hóa đơn:',
+                _formatDate(invoice.issueDate),
+              ),
+              const SizedBox(height: 6),
+
+              _buildDetailRow(
+                'Hạn thanh toán:',
+                _formatDate(invoice.dueDate),
+              ),
+
+              const SizedBox(height: 12),
+
+              // Payment summary section
+              Container(
+                padding: const EdgeInsets.all(12),
+                decoration: BoxDecoration(
+                  color: AppColors.grey50,
+                  borderRadius: BorderRadius.circular(8),
+                ),
+                child: Column(
+                  spacing: 2,
+                  children: [
+                    _buildPaymentRow(
+                      'Tổng tiền:',
+                      currencyFormatter.format(invoice.totalAmount),
+                      fontWeight: FontWeight.w600,
+                    ),
+                    if (invoice.amountPaid > 0) ...[
+                      const SizedBox(height: 6),
+                      _buildPaymentRow(
+                        'Đã thanh toán:',
+                        currencyFormatter.format(invoice.amountPaid),
+                        valueColor: AppColors.success,
+                      ),
+                    ],
+                    const Divider(),
+                    if (invoice.amountRemaining > 0) ...[
+                      const SizedBox(height: 6),
+                      _buildPaymentRow(
+                        'Còn lại:',
+                        currencyFormatter.format(invoice.amountRemaining),
+                        valueColor: invoice.isOverdue
+                            ? AppColors.danger
+                            : AppColors.warning,
+                        fontWeight: FontWeight.w600,
+                      ),
+                    ],
+                  ],
+                ),
+              ),
+
+              const SizedBox(height: 12),
+
+              // Action button
+              _buildActionButton(),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  /// Build detail row
+  Widget _buildDetailRow(String label, String value) {
+    return Row(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+      spacing: 8,
+      children: [
+        Text(
+          label,
+          style: const TextStyle(
+            fontSize: 14,
+            color: AppColors.grey500,
+          ),
+        ),
+
+        Text(
+          value,
+          style: const TextStyle(
+            fontSize: 14,
+            color: AppColors.grey900,
+            fontWeight: FontWeight.bold,
+          ),
+        ),
+      ],
+    );
+  }
+
+  /// Build payment summary row
+  Widget _buildPaymentRow(
+    String label,
+    String value, {
+    Color? valueColor,
+    FontWeight? fontWeight,
+  }) {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+      children: [
+        Text(
+          label,
+          style: const TextStyle(
+            fontSize: 13,
+            color: AppColors.grey500,
+          ),
+        ),
+        Text(
+          value,
+          style: TextStyle(
+            fontSize: 14,
+            fontWeight: fontWeight ?? FontWeight.w400,
+            color: valueColor ?? AppColors.grey900,
+          ),
+        ),
+      ],
+    );
+  }
+
+  /// Build status badge
+  Widget _buildStatusBadge() {
+    return Container(
+      padding: const EdgeInsets.symmetric(
+        horizontal: 12,
+        vertical: 6,
+      ),
+      decoration: BoxDecoration(
+        color: _getStatusColor(invoice.status).withValues(alpha: 0.1),
+        borderRadius: BorderRadius.circular(16),
+        border: Border.all(
+          color: _getStatusColor(invoice.status).withValues(alpha: 0.3),
+          width: 1,
+        ),
+      ),
+      child: Text(
+        _getStatusText(invoice.status).toUpperCase(),
+        style: TextStyle(
+          fontSize: 12,
+          fontWeight: FontWeight.w700,
+          color: _getStatusColor(invoice.status),
+        ),
+      ),
+    );
+  }
+
+  /// Build action button
+  Widget _buildActionButton() {
+    final isPaid = invoice.status == InvoiceStatus.paid || invoice.isPaid;
+    final buttonText = isPaid ? 'Đã hoàn tất' : 'Thanh toán';
+    final buttonColor = isPaid ? AppColors.success : AppColors.primaryBlue;
+
+    return SizedBox(
+      width: double.infinity,
+      child: ElevatedButton(
+        onPressed: isPaid ? null : onPaymentTap,
+        style: ElevatedButton.styleFrom(
+          backgroundColor: buttonColor,
+          disabledBackgroundColor: AppColors.grey100,
+          foregroundColor: Colors.white,
+          disabledForegroundColor: AppColors.grey500,
+          padding: const EdgeInsets.symmetric(vertical: 12),
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(8),
+          ),
+          elevation: 0,
+        ),
+        child: Row(
+          crossAxisAlignment: CrossAxisAlignment.center,
+          mainAxisAlignment: MainAxisAlignment.center,
+          spacing: 8,
+          children: [
+            Icon(Icons.credit_card),
+            Text(
+              buttonText,
+              style: const TextStyle(
+                fontSize: 14,
+                fontWeight: FontWeight.w600,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  /// Get status color
+  Color _getStatusColor(InvoiceStatus status) {
+    switch (status) {
+      case InvoiceStatus.draft:
+        return AppColors.grey500;
+      case InvoiceStatus.issued:
+        return const Color(0xFFF59E0B); // yellow for unpaid
+      case InvoiceStatus.partiallyPaid:
+        return AppColors.info; // blue for partial
+      case InvoiceStatus.paid:
+        return AppColors.success; // green for paid
+      case InvoiceStatus.overdue:
+        return AppColors.danger; // red for overdue
+      case InvoiceStatus.cancelled:
+        return AppColors.grey500;
+      case InvoiceStatus.refunded:
+        return const Color(0xFFF97316); // orange
+    }
+  }
+
+  /// Get status text in Vietnamese
+  String _getStatusText(InvoiceStatus status) {
+    switch (status) {
+      case InvoiceStatus.draft:
+        return 'Nháp';
+      case InvoiceStatus.issued:
+        return 'Chưa thanh toán';
+      case InvoiceStatus.partiallyPaid:
+        return 'Một phần';
+      case InvoiceStatus.paid:
+        return 'Đã thanh toán';
+      case InvoiceStatus.overdue:
+        return 'Quá hạn';
+      case InvoiceStatus.cancelled:
+        return 'Đã hủy';
+      case InvoiceStatus.refunded:
+        return 'Đã hoàn tiền';
+    }
+  }
+
+  /// Format date to dd/MM/yyyy
+  String _formatDate(DateTime date) {
+    return DateFormat('dd/MM/yyyy').format(date);
+  }
+}

lib/features/orders/presentation/widgets/order_card.dart

@@ -0,0 +1,249 @@
+/// Widget: Order Card
+///
+/// Displays order information in a card format.
+library;
+
+import 'dart:convert';
+
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:intl/intl.dart';
+import 'package:worker/core/database/models/enums.dart';
+import 'package:worker/core/theme/colors.dart';
+import 'package:worker/features/orders/data/models/order_model.dart';
+
+/// Order Card Widget
+///
+/// Displays order details in a card with status indicator.
+class OrderCard extends StatelessWidget {
+  /// Order to display
+  final OrderModel order;
+
+  /// Tap callback
+  final VoidCallback? onTap;
+
+  const OrderCard({
+    required this.order,
+    this.onTap,
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final currencyFormatter = NumberFormat.currency(
+      locale: 'vi_VN',
+      symbol: 'đ',
+      decimalDigits: 0,
+    );
+
+    return Card(
+      margin: const EdgeInsets.only(bottom: 12),
+      elevation: 1,
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(12),
+      ),
+      clipBehavior: Clip.antiAlias,
+      child: InkWell(
+        onTap: onTap,
+        child: Container(
+          decoration: BoxDecoration(
+            border: Border(
+              left: BorderSide(
+                color: _getStatusColor(order.status),
+                width: 4,
+              ),
+            ),
+          ),
+          child: Padding(
+            padding: const EdgeInsets.all(16),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                // Order number and amount row
+                Row(
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    // Order number
+                    Text(
+                      '#${order.orderNumber}',
+                      style: const TextStyle(
+                        fontSize: 16,
+                        fontWeight: FontWeight.w700,
+                        color: AppColors.grey900,
+                      ),
+                    ),
+
+                    // Amount
+                    Text(
+                      currencyFormatter.format(order.finalAmount),
+                      style: const TextStyle(
+                        fontSize: 16,
+                        fontWeight: FontWeight.w700,
+                        color: AppColors.primaryBlue,
+                      ),
+                    ),
+                  ],
+                ),
+
+                const SizedBox(height: 12),
+
+                // Order details
+                _buildDetailRow(
+                  'Ngày đặt:',
+                  _formatDate(order.createdAt),
+                ),
+                const SizedBox(height: 6),
+
+                _buildDetailRow(
+                  'Ngày giao:',
+                  order.expectedDeliveryDate != null
+                      ? _formatDate(order.expectedDeliveryDate!)
+                      : 'Chưa xác định',
+                ),
+                const SizedBox(height: 6),
+
+                _buildDetailRow(
+                  'Địa chỉ:',
+                  _getShortAddress(),
+                ),
+                const SizedBox(height: 12),
+
+                // Status badge
+                _buildStatusBadge(),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+
+  /// Build detail row
+  Widget _buildDetailRow(String label, String value) {
+    return Row(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(
+          label,
+          style: const TextStyle(
+            fontSize: 14,
+            color: AppColors.grey500,
+          ),
+        ),
+        const SizedBox(width: 8),
+        Expanded(
+          child: Text(
+            value,
+            style: const TextStyle(
+              fontSize: 14,
+              color: AppColors.grey900,
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+
+  /// Build status badge
+  Widget _buildStatusBadge() {
+    return Container(
+      padding: const EdgeInsets.symmetric(
+        horizontal: 12,
+        vertical: 6,
+      ),
+      decoration: BoxDecoration(
+        color: _getStatusColor(order.status).withValues(alpha: 0.1),
+        borderRadius: BorderRadius.circular(16),
+        border: Border.all(
+          color: _getStatusColor(order.status).withValues(alpha: 0.3),
+          width: 1,
+        ),
+      ),
+      child: Text(
+        _getStatusText(order.status),
+        style: TextStyle(
+          fontSize: 13,
+          fontWeight: FontWeight.w600,
+          color: _getStatusColor(order.status),
+        ),
+      ),
+    );
+  }
+
+  /// Get status color
+  Color _getStatusColor(OrderStatus status) {
+    switch (status) {
+      case OrderStatus.draft:
+        return AppColors.grey500;
+      case OrderStatus.pending:
+        return const Color(0xFFF59E0B); // warning/pending color
+      case OrderStatus.confirmed:
+        return const Color(0xFFF59E0B); // warning/pending color
+      case OrderStatus.processing:
+        return AppColors.info;
+      case OrderStatus.shipped:
+        return const Color(0xFF3B82F6); // blue
+      case OrderStatus.delivered:
+        return const Color(0xFF10B981); // green
+      case OrderStatus.completed:
+        return AppColors.success;
+      case OrderStatus.cancelled:
+        return AppColors.danger;
+      case OrderStatus.refunded:
+        return const Color(0xFFF97316); // orange
+    }
+  }
+
+  /// Get status text in Vietnamese
+  String _getStatusText(OrderStatus status) {
+    switch (status) {
+      case OrderStatus.draft:
+        return 'Nháp';
+      case OrderStatus.pending:
+        return 'Chờ xác nhận';
+      case OrderStatus.confirmed:
+        return 'Đã xác nhận';
+      case OrderStatus.processing:
+        return 'Đang xử lý';
+      case OrderStatus.shipped:
+        return 'Đang giao';
+      case OrderStatus.delivered:
+        return 'Đã giao';
+      case OrderStatus.completed:
+        return 'Hoàn thành';
+      case OrderStatus.cancelled:
+        return 'Đã hủy';
+      case OrderStatus.refunded:
+        return 'Đã hoàn tiền';
+    }
+  }
+
+  /// Format date to dd/MM/yyyy
+  String _formatDate(DateTime date) {
+    return DateFormat('dd/MM/yyyy').format(date);
+  }
+
+  /// Get short address (city or district, city)
+  String _getShortAddress() {
+    if (order.shippingAddress == null) {
+      return 'Chưa có địa chỉ';
+    }
+
+    try {
+      final addressJson = jsonDecode(order.shippingAddress!);
+      final city = addressJson['city'] as String?;
+      final district = addressJson['district'] as String?;
+
+      if (district != null && city != null) {
+        return '$district, $city';
+      } else if (city != null) {
+        return city;
+      } else {
+        return 'Chưa có địa chỉ';
+      }
+    } catch (e) {
+      return 'Chưa có địa chỉ';
+    }
+  }
+}