void

lib/application/void/void_form/void_form_bloc.dart

@@ -0,0 +1,120 @@
+import 'package:bloc/bloc.dart';
+import 'package:dartz/dartz.dart' hide Order;
+import 'package:freezed_annotation/freezed_annotation.dart';
+import 'package:injectable/injectable.dart' hide Order;
+
+import '../../../common/types/void_type.dart';
+import '../../../domain/order/order.dart';
+
+part 'void_form_event.dart';
+part 'void_form_state.dart';
+part 'void_form_bloc.freezed.dart';
+
+@injectable
+class VoidFormBloc extends Bloc<VoidFormEvent, VoidFormState> {
+  final IOrderRepository _repository;
+  VoidFormBloc(this._repository) : super(VoidFormState.initial()) {
+    on<VoidFormEvent>(_onVoidFormEvent);
+  }
+
+  Future<void> _onVoidFormEvent(
+    VoidFormEvent event,
+    Emitter<VoidFormState> emit,
+  ) {
+    return event.map(
+      setOrder: (e) async {
+        List<OrderItem> pendingItems = e.order.orderItems
+            .where((item) => item.status == 'pending')
+            .toList();
+
+        emit(state.copyWith(order: e.order, pendingItems: pendingItems));
+      },
+      voidTypeChanged: (e) async {
+        emit(state.copyWith(voidType: e.voidType));
+      },
+      voidReasonChanged: (e) async {
+        emit(state.copyWith(voidReason: e.voidReason));
+      },
+      itemQuantityChanged: (e) async {
+        final newQuantities = Map<String, int>.from(
+          state.selectedItemQuantities,
+        );
+
+        if (e.quantity > 0) {
+          newQuantities[e.itemId] = e.quantity;
+        } else {
+          newQuantities.remove(e.itemId);
+        }
+
+        // Recalculate total price
+        int newTotal = 0;
+        for (var entry in newQuantities.entries) {
+          final item = state.pendingItems.firstWhere(
+            (item) => item.id == entry.key,
+          );
+          newTotal += item.unitPrice.toInt() * entry.value;
+        }
+
+        emit(
+          state.copyWith(
+            selectedItemQuantities: newQuantities,
+            totalPriceVoid: newTotal,
+          ),
+        );
+      },
+      clearSelectedItem: (e) async {
+        emit(state.copyWith(selectedItemQuantities: {}, totalPriceVoid: 0));
+      },
+      submitted: (e) async {
+        Either<OrderFailure, Unit> failureOrVoid;
+        List<OrderItem> voidItems = [];
+
+        if (state.voidType.isItem) {
+          state.selectedItemQuantities.forEach((itemId, voidQty) {
+            final originalItem = state.order.orderItems.firstWhere(
+              (item) => item.id == itemId,
+            );
+
+            voidItems.add(
+              OrderItem(
+                id: originalItem.id,
+                orderId: originalItem.orderId,
+                productId: originalItem.productId,
+                productName: originalItem.productName,
+                productVariantId: originalItem.productVariantId,
+                productVariantName: originalItem.productVariantName,
+                quantity: voidQty,
+                unitPrice: originalItem.unitPrice,
+                totalPrice: (originalItem.unitPrice) * voidQty,
+                modifiers: originalItem.modifiers,
+                notes: originalItem.notes,
+                status: originalItem.status,
+                createdAt: originalItem.createdAt,
+                updatedAt: originalItem.updatedAt,
+                printerType: originalItem.printerType,
+                paidQuantity: originalItem.paidQuantity,
+              ),
+            );
+          });
+        }
+
+        emit(state.copyWith(isSubmitting: true, failureOrVoid: none()));
+
+        failureOrVoid = await _repository.voidOrder(
+          orderId: state.order.id,
+          reason: state.voidReason ?? '',
+          orderItems: voidItems,
+          type: state.voidType.toStringType(),
+        );
+
+        emit(
+          state.copyWith(
+            isSubmitting: false,
+            failureOrVoid: optionOf(failureOrVoid),
+            voidItems: state.voidType.isItem ? voidItems : state.pendingItems,
+          ),
+        );
+      },
+    );
+  }
+}

lib/application/void/void_form/void_form_event.dart

@@ -0,0 +1,16 @@
+part of 'void_form_bloc.dart';
+
+@freezed
+class VoidFormEvent with _$VoidFormEvent {
+  const factory VoidFormEvent.setOrder(Order order) = _SetOrder;
+  const factory VoidFormEvent.voidTypeChanged(VoidType voidType) =
+      _VoidTypeChanged;
+  const factory VoidFormEvent.voidReasonChanged(String voidReason) =
+      _VoidReasonChanged;
+  const factory VoidFormEvent.itemQuantityChanged({
+    required String itemId,
+    required int quantity,
+  }) = _ItemQuantityChanged;
+  const factory VoidFormEvent.clearSelectedItem() = _ClearSelectedItem;
+  const factory VoidFormEvent.submitted() = _Submitted;
+}

lib/application/void/void_form/void_form_state.dart

@@ -0,0 +1,26 @@
+part of 'void_form_bloc.dart';
+
+@freezed
+class VoidFormState with _$VoidFormState {
+  factory VoidFormState({
+    required Order order,
+    required List<OrderItem> pendingItems,
+    required List<OrderItem> voidItems,
+    required VoidType voidType,
+    required Map<String, int> selectedItemQuantities,
+    String? voidReason,
+    required int totalPriceVoid,
+    required Option<Either<OrderFailure, Unit>> failureOrVoid,
+    @Default(false) bool isSubmitting,
+  }) = _VoidFormState;
+
+  factory VoidFormState.initial() => VoidFormState(
+    order: Order.empty(),
+    voidType: VoidType.all,
+    selectedItemQuantities: {},
+    pendingItems: [],
+    totalPriceVoid: 0,
+    failureOrVoid: none(),
+    voidItems: [],
+  );
+}

lib/common/extension/extension.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:intl/intl.dart';
 
 import '../../domain/table/table.dart';
+import '../types/void_type.dart';
 
 part 'build_context_extension.dart';
 part 'int_extension.dart';

lib/common/extension/string_extension.dart

@@ -36,4 +36,15 @@ extension StringX on String {
         return TableStatusType.unknown;
     }
   }
+
+  VoidType toVoidType() {
+    switch (this) {
+      case 'all':
+        return VoidType.all;
+      case 'item':
+        return VoidType.item;
+      default:
+        return VoidType.unknown;
+    }
+  }
 }

lib/common/types/void_type.dart

@@ -0,0 +1,12 @@
+enum VoidType { all, item, unknown }
+
+extension VoidTypeX on VoidType {
+  String toStringType() => switch (this) {
+    VoidType.all => 'ALL',
+    VoidType.item => 'ITEM',
+    VoidType.unknown => 'unknown',
+  };
+
+  bool get isAll => this == VoidType.all;
+  bool get isItem => this == VoidType.item;
+}

lib/domain/order/repositories/i_order_repository.dart

@@ -29,4 +29,11 @@ abstract class IOrderRepository {
   Future<Either<OrderFailure, Payment>> createPayment({
     required PaymentRequest request,
   });
+
+  Future<Either<OrderFailure, Unit>> voidOrder({
+    required String orderId,
+    required String reason,
+    String type = "ITEM", // TYPE: ALL, ITEM
+    required List<OrderItem> orderItems,
+  });
 }

lib/infrastructure/order/datasources/remote_data_provider.dart

@@ -1,5 +1,6 @@
 import 'dart:developer';
 
+import 'package:dartz/dartz.dart';
 import 'package:data_channel/data_channel.dart';
 import 'package:injectable/injectable.dart';
 import 'package:intl/intl.dart';
@@ -202,4 +203,37 @@ class OrderRemoteDataProvider {
       return DC.error(OrderFailure.serverError(e));
     }
   }
+
+  Future<DC<OrderFailure, Unit>> voidOrder({
+    required String orderId,
+    required String reason,
+    String type = "ITEM", // TYPE: ALL, ITEM
+    required List<OrderItemDto> orderItems,
+  }) async {
+    try {
+      final response = await _apiClient.post(
+        '${ApiPath.orders}/void',
+        data: {
+          'order_id': orderId,
+          'type': orderItems.isEmpty ? "ALL" : type,
+          'reason': reason,
+          "items": orderItems
+              .map(
+                (item) => {'order_item_id': item.id, "quantity": item.quantity},
+              )
+              .toList(),
+        },
+        headers: getAuthorizationHeader(),
+      );
+
+      if (response.data['success'] == false) {
+        return DC.error(OrderFailure.unexpectedError());
+      }
+
+      return DC.data(unit);
+    } on ApiFailure catch (e, s) {
+      log('voidOrderError', name: _logName, error: e, stackTrace: s);
+      return DC.error(OrderFailure.serverError(e));
+    }
+  }
 }

lib/infrastructure/order/dtos/order_dto.dart

@@ -136,4 +136,23 @@ class OrderItemDto with _$OrderItemDto {
     printerType: printerType ?? '',
     paidQuantity: paidQuantity ?? 0,
   );
+
+  factory OrderItemDto.fromDomain(OrderItem orderItem) => OrderItemDto(
+    id: orderItem.id,
+    orderId: orderItem.orderId,
+    productId: orderItem.productId,
+    productName: orderItem.productName,
+    productVariantId: orderItem.productVariantId,
+    productVariantName: orderItem.productVariantName,
+    quantity: orderItem.quantity,
+    unitPrice: orderItem.unitPrice,
+    totalPrice: orderItem.totalPrice,
+    modifiers: orderItem.modifiers,
+    notes: orderItem.notes,
+    status: orderItem.status,
+    createdAt: orderItem.createdAt.toIso8601String(),
+    updatedAt: orderItem.updatedAt.toIso8601String(),
+    printerType: orderItem.printerType,
+    paidQuantity: orderItem.paidQuantity,
+  );
 }

lib/infrastructure/order/dtos/order_request_dto.dart

@@ -98,11 +98,18 @@ class OrderItemRequestDto with _$OrderItemRequestDto {
         notes: request.notes,
       );
 
-  Map<String, dynamic> toRequest() => {
+  Map<String, dynamic> toRequest() {
+    Map<String, dynamic> data = {
       "product_id": productId,
-    "product_variant_id": productVariantId,
       "quantity": quantity,
       "unit_price": unitPrice,
       "notes": notes,
     };
+
+    if (productVariantId != null && productVariantId != '') {
+      data["product_variant_id"] = productVariantId;
+    }
+
+    return data;
+  }
 }

lib/infrastructure/order/repositories/order_repository.dart

@@ -151,4 +151,30 @@ class OrderRepository implements IOrderRepository {
       return left(const OrderFailure.unexpectedError());
     }
   }
+
+  @override
+  Future<Either<OrderFailure, Unit>> voidOrder({
+    required String orderId,
+    required String reason,
+    String type = "ITEM",
+    required List<OrderItem> orderItems,
+  }) async {
+    try {
+      final result = await _dataProvider.voidOrder(
+        orderId: orderId,
+        reason: reason,
+        type: type,
+        orderItems: orderItems.map((e) => OrderItemDto.fromDomain(e)).toList(),
+      );
+
+      if (result.hasError) {
+        return left(result.error!);
+      }
+
+      return right(unit);
+    } catch (e) {
+      log('voidOrderError', name: _logName, error: e);
+      return left(const OrderFailure.unexpectedError());
+    }
+  }
 }

lib/injection.config.dart

@@ -35,6 +35,8 @@ import 'package:apskel_pos_flutter_v2/application/table/table_form/table_form_bl
     as _i248;
 import 'package:apskel_pos_flutter_v2/application/table/table_loader/table_loader_bloc.dart'
     as _i424;
+import 'package:apskel_pos_flutter_v2/application/void/void_form/void_form_bloc.dart'
+    as _i822;
 import 'package:apskel_pos_flutter_v2/common/api/api_client.dart' as _i457;
 import 'package:apskel_pos_flutter_v2/common/database/database_helper.dart'
     as _i487;
@@ -237,6 +239,9 @@ extension GetItInjectableX on _i174.GetIt {
     gh.factory<_i194.PaymentFormBloc>(
       () => _i194.PaymentFormBloc(gh<_i299.IOrderRepository>()),
     );
+    gh.factory<_i822.VoidFormBloc>(
+      () => _i822.VoidFormBloc(gh<_i299.IOrderRepository>()),
+    );
     gh.factory<_i683.CustomerLoaderBloc>(
       () => _i683.CustomerLoaderBloc(gh<_i143.ICustomerRepository>()),
     );

lib/presentation/app_widget.dart

@@ -12,6 +12,7 @@ import '../application/payment_method/payment_method_loader/payment_method_loade
 import '../application/product/product_loader/product_loader_bloc.dart';
 import '../application/table/table_form/table_form_bloc.dart';
 import '../application/table/table_loader/table_loader_bloc.dart';
+import '../application/void/void_form/void_form_bloc.dart';
 import '../common/theme/theme.dart';
 import '../common/constant/app_constant.dart';
 import '../injection.dart';
@@ -43,6 +44,7 @@ class _AppWidgetState extends State<AppWidget> {
         BlocProvider(create: (context) => getIt<OrderFormBloc>()),
         BlocProvider(create: (context) => getIt<OrderLoaderBloc>()),
         BlocProvider(create: (context) => getIt<CustomerLoaderBloc>()),
+        BlocProvider(create: (context) => getIt<VoidFormBloc>()),
       ],
       child: MaterialApp.router(
         debugShowCheckedModeBanner: false,

lib/presentation/components/dialog/order/order_void_confirm_dialog.dart

@@ -0,0 +1,263 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+
+import '../../../../application/void/void_form/void_form_bloc.dart';
+import '../../../../common/extension/extension.dart';
+import '../../../../common/theme/theme.dart';
+import '../../../../common/types/void_type.dart';
+import '../../button/button.dart';
+import '../../spaces/space.dart';
+import '../dialog.dart';
+
+class OrderVoidConfirmDialog extends StatelessWidget {
+  final String message;
+  const OrderVoidConfirmDialog({super.key, required this.message});
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocBuilder<VoidFormBloc, VoidFormState>(
+      builder: (context, state) {
+        return CustomModalDialog(
+          title: 'Konfirmasi Void',
+          subtitle: 'Tindakan ini tidak dapat dibatalkan',
+          contentPadding: EdgeInsets.all(16),
+          bottom: Padding(
+            padding: const EdgeInsets.all(16.0),
+            child: Row(
+              children: [
+                Expanded(
+                  child: AppElevatedButton.outlined(
+                    onPressed: () => context.maybePop(),
+                    label: 'Batal',
+                  ),
+                ),
+                const SpaceWidth(16),
+                Expanded(
+                  child: AppElevatedButton.filled(
+                    onPressed: () {
+                      context.read<VoidFormBloc>().add(
+                        VoidFormEvent.submitted(),
+                      );
+                    },
+                    label: state.voidType.isAll ? 'Void Pesanan' : 'Void Item',
+                    isLoading: state.isSubmitting,
+                  ),
+                ),
+              ],
+            ),
+          ),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Text(
+                message,
+                style: AppStyle.md.copyWith(
+                  height: 1,
+                  color: AppColor.textPrimary,
+                ),
+              ),
+
+              if (state.voidType.isItem &&
+                  state.selectedItemQuantities.isNotEmpty) ...[
+                SizedBox(height: 16),
+
+                // Items section
+                Container(
+                  width: double.infinity,
+                  decoration: BoxDecoration(
+                    color: AppColor.primary.withOpacity(0.1),
+                    borderRadius: BorderRadius.circular(12),
+                    border: Border.all(color: AppColor.primary),
+                  ),
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Padding(
+                        padding: EdgeInsets.all(16),
+                        child: Row(
+                          children: [
+                            Container(
+                              padding: EdgeInsets.all(6),
+                              decoration: BoxDecoration(
+                                color: AppColor.primary.withOpacity(0.2),
+                                borderRadius: BorderRadius.circular(6),
+                              ),
+                              child: Icon(
+                                Icons.list_alt_rounded,
+                                color: AppColor.primary,
+                                size: 16,
+                              ),
+                            ),
+                            SizedBox(width: 8),
+                            Text(
+                              'Item yang akan divoid:',
+                              style: AppStyle.md.copyWith(
+                                fontWeight: FontWeight.bold,
+                                color: AppColor.primary,
+                              ),
+                            ),
+                          ],
+                        ),
+                      ),
+                      Container(
+                        constraints: BoxConstraints(maxHeight: 120),
+                        child: Scrollbar(
+                          child: SingleChildScrollView(
+                            padding: EdgeInsets.only(
+                              left: 16,
+                              right: 16,
+                              bottom: 16,
+                            ),
+                            child: Column(
+                              children: state.selectedItemQuantities.entries
+                                  .map((entry) {
+                                    final item = state.order.orderItems
+                                        .firstWhere(
+                                          (item) => item.id == entry.key,
+                                        );
+                                    return Container(
+                                      margin: EdgeInsets.only(bottom: 6),
+                                      padding: EdgeInsets.all(10),
+                                      decoration: BoxDecoration(
+                                        color: Colors.white,
+                                        borderRadius: BorderRadius.circular(6),
+                                        boxShadow: [
+                                          BoxShadow(
+                                            color: Colors.black.withOpacity(
+                                              0.03,
+                                            ),
+                                            blurRadius: 2,
+                                            offset: Offset(0, 1),
+                                          ),
+                                        ],
+                                      ),
+                                      child: Row(
+                                        children: [
+                                          Container(
+                                            width: 6,
+                                            height: 6,
+                                            decoration: BoxDecoration(
+                                              color: AppColor.primary,
+                                              shape: BoxShape.circle,
+                                            ),
+                                          ),
+                                          SizedBox(width: 8),
+                                          Expanded(
+                                            child: Column(
+                                              crossAxisAlignment:
+                                                  CrossAxisAlignment.start,
+                                              children: [
+                                                Text(
+                                                  item.productName,
+                                                  style: AppStyle.sm.copyWith(
+                                                    fontWeight: FontWeight.w600,
+                                                  ),
+                                                  maxLines: 1,
+                                                  overflow:
+                                                      TextOverflow.ellipsis,
+                                                ),
+                                                Text(
+                                                  '${entry.value} qty',
+                                                  style: AppStyle.xs.copyWith(
+                                                    fontSize: 10,
+                                                    color:
+                                                        AppColor.textSecondary,
+                                                  ),
+                                                ),
+                                              ],
+                                            ),
+                                          ),
+                                          Container(
+                                            padding: EdgeInsets.symmetric(
+                                              horizontal: 6,
+                                              vertical: 2,
+                                            ),
+                                            decoration: BoxDecoration(
+                                              color: AppColor.primary
+                                                  .withOpacity(0.2),
+                                              borderRadius:
+                                                  BorderRadius.circular(4),
+                                            ),
+                                            child: Text(
+                                              ((item.unitPrice) * entry.value)
+                                                  .currencyFormatRpV2,
+                                              style: AppStyle.xs.copyWith(
+                                                fontWeight: FontWeight.bold,
+                                                color: AppColor.primary,
+                                              ),
+                                            ),
+                                          ),
+                                        ],
+                                      ),
+                                    );
+                                  })
+                                  .toList(),
+                            ),
+                          ),
+                        ),
+                      ),
+                    ],
+                  ),
+                ),
+              ],
+              SizedBox(height: 16),
+              // Reason section
+              Container(
+                width: double.infinity,
+                padding: EdgeInsets.all(12),
+                decoration: BoxDecoration(
+                  color: Colors.blue[50],
+                  borderRadius: BorderRadius.circular(8),
+                  border: Border.all(color: Colors.blue[200]!),
+                ),
+                child: Row(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Container(
+                      padding: EdgeInsets.all(6),
+                      decoration: BoxDecoration(
+                        color: AppColor.info.withOpacity(0.1),
+                        borderRadius: BorderRadius.circular(6),
+                      ),
+                      child: Icon(
+                        Icons.note_alt_rounded,
+                        color: AppColor.info,
+                        size: 16,
+                      ),
+                    ),
+                    SizedBox(width: 8),
+                    Expanded(
+                      child: Column(
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [
+                          Text(
+                            'Alasan:',
+                            style: AppStyle.sm.copyWith(
+                              fontWeight: FontWeight.w600,
+                              color: AppColor.info,
+                              fontSize: 12,
+                            ),
+                          ),
+                          SizedBox(height: 2),
+                          Text(
+                            state.voidReason ?? "",
+                            style: TextStyle(
+                              fontStyle: FontStyle.italic,
+                              color: AppColor.info.withOpacity(0.7),
+                              fontSize: 12,
+                            ),
+                          ),
+                        ],
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            ],
+          ),
+        );
+      },
+    );
+  }
+}

lib/presentation/components/field/text_field.dart

@@ -52,7 +52,7 @@ class AppTextFormField extends StatelessWidget {
           maxLines: maxLines,
           validator: validator,
           decoration: InputDecoration(
-            contentPadding: EdgeInsets.symmetric(vertical: 0, horizontal: 12),
+            contentPadding: EdgeInsets.symmetric(vertical: 4, horizontal: 12),
             prefixIcon: prefixIcon,
             suffixIcon: suffixIcon,
             hintText: label,

lib/presentation/pages/order/widgets/order_right_panel.dart

@@ -87,7 +87,9 @@ class OrderRightPanel extends StatelessWidget {
               SpaceWidth(8),
               if (state.selectedOrder?.status == 'pending') ...[
                 AppElevatedButton.outlined(
-                  onPressed: () {},
+                  onPressed: () => context.router.push(
+                    VoidRoute(order: state.selectedOrder!),
+                  ),
                   label: 'Void',
                   icon: Icon(Icons.undo),
                 ),

lib/presentation/pages/void/void_page.dart

@@ -0,0 +1,63 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+
+import '../../../application/void/void_form/void_form_bloc.dart';
+import '../../../common/theme/theme.dart';
+import '../../../domain/order/order.dart';
+import '../../components/spaces/space.dart';
+import '../../components/toast/flushbar.dart';
+import 'widgets/void_left_panel.dart';
+import 'widgets/void_right_panel.dart';
+
+@RoutePage()
+class VoidPage extends StatelessWidget implements AutoRouteWrapper {
+  final Order order;
+  const VoidPage({super.key, required this.order});
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocListener<VoidFormBloc, VoidFormState>(
+      listenWhen: (previous, current) =>
+          previous.failureOrVoid != current.failureOrVoid,
+      listener: (context, state) {
+        state.failureOrVoid.fold(
+          () => null,
+          (either) => either.fold(
+            (f) => AppFlushbar.showOrderFailureToast(context, f),
+            (success) {
+              if (context.mounted) {}
+            },
+          ),
+        );
+      },
+      child: Scaffold(
+        backgroundColor: AppColor.background,
+        body: SafeArea(
+          child: BlocBuilder<VoidFormBloc, VoidFormState>(
+            builder: (context, state) {
+              return Container(
+                padding: EdgeInsets.all(24),
+                child: Row(
+                  children: [
+                    // Left Panel - Order Details & Items
+                    Expanded(flex: 3, child: VoidLeftPanel(state: state)),
+                    SpaceWidth(24),
+                    // Right Panel - Void Configuration
+                    Expanded(flex: 2, child: VoidRightPanel(state: state)),
+                  ],
+                ),
+              );
+            },
+          ),
+        ),
+      ),
+    );
+  }
+
+  @override
+  Widget wrappedRoute(BuildContext context) {
+    context.read<VoidFormBloc>().add(VoidFormEvent.setOrder(order));
+    return this;
+  }
+}

lib/presentation/pages/void/widgets/void_left_panel.dart

@@ -0,0 +1,249 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+
+import '../../../../application/void/void_form/void_form_bloc.dart';
+import '../../../../common/extension/extension.dart';
+import '../../../../common/theme/theme.dart';
+import '../../../../common/types/void_type.dart';
+import '../../../components/spaces/space.dart';
+import 'void_product_card.dart';
+
+class VoidLeftPanel extends StatefulWidget {
+  final VoidFormState state;
+  const VoidLeftPanel({super.key, required this.state});
+
+  @override
+  State<VoidLeftPanel> createState() => _VoidLeftPanelState();
+}
+
+class _VoidLeftPanelState extends State<VoidLeftPanel> {
+  final ScrollController _scrollController = ScrollController();
+
+  @override
+  void dispose() {
+    super.dispose();
+    _scrollController.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: BoxDecoration(
+        color: Colors.white,
+        borderRadius: BorderRadius.circular(12),
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Container(
+            padding: EdgeInsets.all(16),
+            decoration: BoxDecoration(
+              border: Border(
+                bottom: BorderSide(width: 1, color: AppColor.border),
+              ),
+              borderRadius: BorderRadius.only(
+                topLeft: Radius.circular(12),
+                topRight: Radius.circular(12),
+              ),
+            ),
+            child: Row(
+              children: [
+                Icon(Icons.receipt_long, color: AppColor.primary, size: 24),
+                SpaceWidth(12),
+                Expanded(
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Text(
+                        'Pesanan #${widget.state.order.orderNumber}',
+                        style: AppStyle.xl.copyWith(
+                          fontWeight: FontWeight.bold,
+                          color: AppColor.primary,
+                        ),
+                      ),
+                      Text(
+                        'Meja: ${widget.state.order.tableNumber} • ${widget.state.order.orderType}',
+                        style: AppStyle.md.copyWith(
+                          color: AppColor.textSecondary,
+                        ),
+                      ),
+                    ],
+                  ),
+                ),
+                Container(
+                  padding: EdgeInsets.symmetric(horizontal: 12, vertical: 6),
+                  decoration: BoxDecoration(
+                    color: _getStatusColor(
+                      widget.state.order.status,
+                    ).withOpacity(0.2),
+                    borderRadius: BorderRadius.circular(16),
+                  ),
+                  child: Text(
+                    widget.state.order.status.toUpperCase(),
+                    style: AppStyle.sm.copyWith(
+                      fontWeight: FontWeight.w600,
+                      color: _getStatusColor(widget.state.order.status),
+                    ),
+                  ),
+                ),
+              ],
+            ),
+          ),
+          Expanded(
+            child: Scrollbar(
+              controller: _scrollController,
+              thumbVisibility: true,
+              child: SingleChildScrollView(
+                controller: _scrollController,
+                padding: EdgeInsets.all(20),
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Row(
+                      children: [
+                        Icon(
+                          Icons.shopping_cart,
+                          color: AppColor.primary,
+                          size: 20,
+                        ),
+                        SpaceWidth(8),
+                        Text(
+                          'Produk Pesanan (${widget.state.pendingItems.length})',
+                          style: AppStyle.lg.copyWith(
+                            fontWeight: FontWeight.bold,
+                            color: AppColor.primary,
+                          ),
+                        ),
+                      ],
+                    ),
+                    SpaceHeight(16),
+
+                    ...List.generate(widget.state.pendingItems.length, (index) {
+                      final item = widget.state.pendingItems[index];
+                      final voidQty =
+                          widget.state.selectedItemQuantities[item.id] ?? 0;
+                      final isSelected = voidQty > 0;
+                      final canSelect = widget.state.voidType.isItem;
+
+                      return VoidProductCard(
+                        isSelected: isSelected,
+                        item: item,
+                        voidQty: voidQty,
+                        canSelect: canSelect,
+                        onTapDecrease: voidQty > 0
+                            ? () {
+                                context.read<VoidFormBloc>().add(
+                                  VoidFormEvent.itemQuantityChanged(
+                                    itemId: item.id,
+                                    quantity: voidQty - 1,
+                                  ),
+                                );
+                              }
+                            : null,
+                        onTapIncrease: voidQty < item.quantity
+                            ? () {
+                                context.read<VoidFormBloc>().add(
+                                  VoidFormEvent.itemQuantityChanged(
+                                    itemId: item.id,
+                                    quantity: voidQty + 1,
+                                  ),
+                                );
+                              }
+                            : null,
+                      );
+                    }),
+                  ],
+                ),
+              ),
+            ),
+          ),
+          Container(
+            padding: EdgeInsets.all(16),
+            child: Column(
+              children: [
+                _buildSummaryRow(
+                  'Subtotal:',
+                  (widget.state.order.subtotal).currencyFormatRpV2,
+                ),
+                _buildSummaryRow(
+                  'Pajak:',
+                  (widget.state.order.taxAmount).currencyFormatRpV2,
+                ),
+                // _buildSummaryRow(
+                //   'Diskon:',
+                //   '- ${(widget.state.order.discountAmount).currencyFormatRpV2}',
+                // ),
+                Divider(thickness: 1),
+                _buildSummaryRow(
+                  'Total:',
+                  (widget.state.order.totalAmount).currencyFormatRpV2,
+                  isTotal: true,
+                ),
+                if (widget.state.voidType.isItem &&
+                    widget.state.selectedItemQuantities.isNotEmpty) ...[
+                  Divider(thickness: 1, color: Colors.red[300]),
+                  _buildSummaryRow(
+                    'Total Void:',
+                    '- ${widget.state.totalPriceVoid.currencyFormatRpV2}',
+                    isVoid: true,
+                  ),
+                ],
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildSummaryRow(
+    String label,
+    String value, {
+    bool isTotal = false,
+    bool isVoid = false,
+  }) {
+    return Padding(
+      padding: EdgeInsets.symmetric(vertical: 4),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          Text(
+            label,
+            style: TextStyle(
+              fontSize: isTotal ? 16 : 14,
+              fontWeight: isTotal ? FontWeight.bold : FontWeight.normal,
+              color: isVoid
+                  ? AppColor.error
+                  : (isTotal ? AppColor.primary : AppColor.textPrimary),
+            ),
+          ),
+          Text(
+            value,
+            style: TextStyle(
+              fontSize: isTotal ? 16 : 14,
+              fontWeight: isTotal ? FontWeight.bold : FontWeight.w500,
+              color: isVoid
+                  ? AppColor.error
+                  : (isTotal ? AppColor.primary : AppColor.textPrimary),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Color _getStatusColor(String? status) {
+    switch (status?.toLowerCase()) {
+      case 'completed':
+        return AppColor.success;
+      case 'pending':
+        return AppColor.warning;
+      case 'cancelled':
+        return AppColor.error;
+      case 'processing':
+        return AppColor.info;
+      default:
+        return AppColor.primary;
+    }
+  }
+}

lib/presentation/pages/void/widgets/void_product_card.dart

@@ -0,0 +1,217 @@
+import 'package:flutter/material.dart';
+
+import '../../../../common/extension/extension.dart';
+import '../../../../common/theme/theme.dart';
+import '../../../../domain/order/order.dart';
+import '../../../components/spaces/space.dart';
+
+class VoidProductCard extends StatelessWidget {
+  final bool isSelected;
+  final OrderItem item;
+  final int voidQty;
+  final bool canSelect;
+  final Function()? onTapDecrease;
+  final Function()? onTapIncrease;
+  const VoidProductCard({
+    super.key,
+    required this.isSelected,
+    required this.item,
+    required this.voidQty,
+    required this.canSelect,
+    required this.onTapDecrease,
+    required this.onTapIncrease,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      margin: EdgeInsets.only(bottom: 12),
+      decoration: BoxDecoration(
+        color: isSelected ? AppColor.primary.withOpacity(0.1) : Colors.white,
+        border: Border.all(
+          color: isSelected ? AppColor.primary : AppColor.border,
+          width: isSelected ? 2 : 1,
+        ),
+        borderRadius: BorderRadius.circular(8),
+      ),
+      child: Padding(
+        padding: EdgeInsets.all(16),
+        child: Column(
+          children: [
+            Row(
+              children: [
+                // Product Info
+                Expanded(
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Text(
+                        item.productName,
+                        style: AppStyle.lg.copyWith(
+                          fontWeight: FontWeight.w600,
+                        ),
+                      ),
+                      if (item.productVariantName.isNotEmpty)
+                        Text(
+                          'Varian: ${item.productVariantName}',
+                          style: AppStyle.sm.copyWith(
+                            color: AppColor.textSecondary,
+                          ),
+                        ),
+                      SpaceHeight(4),
+                      Row(
+                        children: [
+                          Container(
+                            padding: EdgeInsets.symmetric(
+                              horizontal: 8,
+                              vertical: 2,
+                            ),
+                            decoration: BoxDecoration(
+                              color: Colors.blue.withOpacity(0.1),
+                              borderRadius: BorderRadius.circular(12),
+                            ),
+                            child: Text(
+                              'Qty: ${item.quantity}',
+                              style: AppStyle.sm.copyWith(
+                                fontWeight: FontWeight.w500,
+                                color: Colors.blue[700],
+                              ),
+                            ),
+                          ),
+                          SpaceWidth(8),
+                          Text(
+                            (item.unitPrice).currencyFormatRpV2,
+                            style: AppStyle.sm.copyWith(
+                              color: AppColor.textSecondary,
+                            ),
+                          ),
+                        ],
+                      ),
+                      if (item.notes.isNotEmpty)
+                        Padding(
+                          padding: EdgeInsets.only(top: 4),
+                          child: Container(
+                            padding: EdgeInsets.symmetric(
+                              horizontal: 8,
+                              vertical: 2,
+                            ),
+                            decoration: BoxDecoration(
+                              color: Colors.orange.withOpacity(0.1),
+                              borderRadius: BorderRadius.circular(4),
+                            ),
+                            child: Text(
+                              'Catatan: ${item.notes}',
+                              style: AppStyle.xs.copyWith(
+                                color: AppColor.warning,
+                              ),
+                            ),
+                          ),
+                        ),
+                    ],
+                  ),
+                ),
+
+                if (canSelect) ...[
+                  Container(
+                    decoration: BoxDecoration(
+                      border: Border.all(color: AppColor.border),
+                      borderRadius: BorderRadius.circular(6),
+                    ),
+                    child: Row(
+                      mainAxisSize: MainAxisSize.min,
+                      children: [
+                        // Decrease Button
+                        InkWell(
+                          onTap: onTapDecrease,
+                          child: Container(
+                            padding: EdgeInsets.all(8),
+                            child: Icon(
+                              Icons.remove,
+                              size: 16,
+                              color: voidQty > 0
+                                  ? AppColor.primary
+                                  : Colors.grey[400],
+                            ),
+                          ),
+                        ),
+
+                        // Quantity Display
+                        Container(
+                          padding: EdgeInsets.symmetric(
+                            horizontal: 16,
+                            vertical: 8,
+                          ),
+                          decoration: BoxDecoration(
+                            border: Border.symmetric(
+                              vertical: BorderSide(color: AppColor.border),
+                            ),
+                          ),
+                          child: Text(
+                            '$voidQty',
+                            style: AppStyle.sm.copyWith(
+                              fontWeight: FontWeight.w600,
+                            ),
+                          ),
+                        ),
+
+                        // Increase Button
+                        InkWell(
+                          onTap: onTapIncrease,
+                          child: Container(
+                            padding: EdgeInsets.all(8),
+                            child: Icon(
+                              Icons.add,
+                              size: 16,
+                              color: voidQty < (item.quantity)
+                                  ? AppColor.primary
+                                  : Colors.grey[400],
+                            ),
+                          ),
+                        ),
+                      ],
+                    ),
+                  ),
+                  SpaceWidth(20),
+                ],
+                // Price
+                Column(
+                  crossAxisAlignment: CrossAxisAlignment.end,
+                  children: [
+                    Text(
+                      (item.totalPrice).currencyFormatRpV2,
+                      style: AppStyle.lg.copyWith(
+                        fontWeight: FontWeight.bold,
+                        color: AppColor.primary,
+                      ),
+                    ),
+                    if (isSelected)
+                      Container(
+                        padding: EdgeInsets.symmetric(
+                          horizontal: 6,
+                          vertical: 2,
+                        ),
+                        decoration: BoxDecoration(
+                          color: Colors.red.withOpacity(0.1),
+                          borderRadius: BorderRadius.circular(4),
+                        ),
+                        child: Text(
+                          'Void: ${((item.unitPrice) * voidQty).currencyFormatRpV2}',
+                          style: AppStyle.sm.copyWith(
+                            fontSize: 12,
+                            color: AppColor.error,
+                            fontWeight: FontWeight.w500,
+                          ),
+                        ),
+                      ),
+                  ],
+                ),
+              ],
+            ),
+
+            // Quantity Controls (only show for item void)
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/presentation/pages/void/widgets/void_radio.dart

@@ -0,0 +1,47 @@
+import 'package:flutter/material.dart';
+
+import '../../../../common/theme/theme.dart';
+import '../../../../common/types/void_type.dart';
+
+class VoidRadio extends StatelessWidget {
+  final VoidType voidType;
+  final VoidType value;
+  final Function(VoidType?)? onChanged;
+  final String title;
+  final String subtitle;
+  const VoidRadio({
+    super.key,
+    required this.voidType,
+    required this.value,
+    this.onChanged,
+    required this.title,
+    required this.subtitle,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: BoxDecoration(
+        border: Border.all(
+          color: voidType == value ? AppColor.primary : Colors.grey[300]!,
+          width: voidType == value ? 2 : 1,
+        ),
+        borderRadius: BorderRadius.circular(8),
+      ),
+      child: RadioListTile<VoidType>(
+        title: Text(
+          title,
+          style: AppStyle.md.copyWith(fontWeight: FontWeight.w600),
+        ),
+        subtitle: Text(
+          subtitle,
+          style: AppStyle.sm.copyWith(color: AppColor.textSecondary),
+        ),
+        value: value,
+        groupValue: voidType,
+        activeColor: AppColor.primary,
+        onChanged: onChanged,
+      ),
+    );
+  }
+}

lib/presentation/pages/void/widgets/void_right_panel.dart

@@ -0,0 +1,372 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+
+import '../../../../application/void/void_form/void_form_bloc.dart';
+import '../../../../common/extension/extension.dart';
+import '../../../../common/theme/theme.dart';
+import '../../../../common/types/void_type.dart';
+import '../../../components/button/button.dart';
+import '../../../components/dialog/order/order_void_confirm_dialog.dart';
+import '../../../components/field/field.dart';
+import '../../../components/spaces/space.dart';
+import 'void_radio.dart';
+
+class VoidRightPanel extends StatefulWidget {
+  final VoidFormState state;
+  const VoidRightPanel({super.key, required this.state});
+
+  @override
+  State<VoidRightPanel> createState() => _VoidRightPanelState();
+}
+
+class _VoidRightPanelState extends State<VoidRightPanel> {
+  final ScrollController _scrollController = ScrollController();
+
+  @override
+  void dispose() {
+    super.dispose();
+    _scrollController.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: BoxDecoration(
+        color: Colors.white,
+        borderRadius: BorderRadius.circular(12),
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Container(
+            padding: EdgeInsets.all(20),
+            decoration: BoxDecoration(
+              border: Border(
+                bottom: BorderSide(width: 1, color: AppColor.border),
+              ),
+              borderRadius: BorderRadius.only(
+                topLeft: Radius.circular(12),
+                topRight: Radius.circular(12),
+              ),
+            ),
+            child: Row(
+              children: [
+                Text(
+                  'Konfigurasi Void',
+                  style: AppStyle.xxl.copyWith(
+                    fontWeight: FontWeight.bold,
+                    color: AppColor.primary,
+                  ),
+                ),
+              ],
+            ),
+          ),
+          Expanded(
+            child: Scrollbar(
+              controller: _scrollController,
+              thumbVisibility: true,
+              child: SingleChildScrollView(
+                controller: _scrollController,
+                padding: EdgeInsets.all(20),
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Text(
+                      'Tipe Void *',
+                      style: AppStyle.lg.copyWith(
+                        fontWeight: FontWeight.bold,
+                        color: AppColor.primary,
+                      ),
+                    ),
+                    SpaceHeight(12),
+                    VoidRadio(
+                      voidType: widget.state.voidType,
+                      value: VoidType.all,
+                      title: 'Batalkan Seluruh Pesanan',
+                      subtitle: "Batalkan pesanan lengkap dan semua item",
+                      onChanged: (VoidType? value) {
+                        context.read<VoidFormBloc>().add(
+                          VoidFormEvent.clearSelectedItem(),
+                        );
+                        context.read<VoidFormBloc>().add(
+                          VoidFormEvent.voidTypeChanged(value!),
+                        );
+                      },
+                    ),
+                    SpaceHeight(12),
+                    VoidRadio(
+                      voidType: widget.state.voidType,
+                      value: VoidType.item,
+                      title: 'Batalkan Barang/Jumlah Tertentu',
+                      subtitle:
+                          "Mengurangi atau membatalkan jumlah item tertentu",
+                      onChanged: (VoidType? value) {
+                        context.read<VoidFormBloc>().add(
+                          VoidFormEvent.voidTypeChanged(value!),
+                        );
+                      },
+                    ),
+                    SpaceHeight(24),
+
+                    // Selected Items Summary (only show for item void)
+                    if (widget.state.voidType.isItem) ...[
+                      Container(
+                        padding: EdgeInsets.all(16),
+                        decoration: BoxDecoration(
+                          color: widget.state.selectedItemQuantities.isEmpty
+                              ? AppColor.warning.withOpacity(0.1)
+                              : AppColor.success.withOpacity(0.1),
+                          borderRadius: BorderRadius.circular(8),
+                          border: Border.all(
+                            color: widget.state.selectedItemQuantities.isEmpty
+                                ? AppColor.warning.withOpacity(0.6)
+                                : AppColor.success.withOpacity(0.6),
+                          ),
+                        ),
+                        child: Column(
+                          crossAxisAlignment: CrossAxisAlignment.start,
+                          children: [
+                            Row(
+                              children: [
+                                Icon(
+                                  widget.state.selectedItemQuantities.isEmpty
+                                      ? Icons.warning
+                                      : Icons.check_circle,
+                                  color:
+                                      widget
+                                          .state
+                                          .selectedItemQuantities
+                                          .isEmpty
+                                      ? AppColor.warning
+                                      : AppColor.success,
+                                  size: 20,
+                                ),
+                                SpaceWidth(8),
+                                Expanded(
+                                  child: Text(
+                                    widget.state.selectedItemQuantities.isEmpty
+                                        ? 'Silakan pilih item dan jumlah yang akan dibatalkan'
+                                        : 'Item yang dipilih untuk dibatalkan:',
+                                    style: AppStyle.md.copyWith(
+                                      fontWeight: FontWeight.w500,
+                                      color:
+                                          widget
+                                              .state
+                                              .selectedItemQuantities
+                                              .isEmpty
+                                          ? AppColor.warning
+                                          : AppColor.success,
+                                    ),
+                                  ),
+                                ),
+                              ],
+                            ),
+                            if (widget
+                                .state
+                                .selectedItemQuantities
+                                .isNotEmpty) ...[
+                              SpaceHeight(12),
+                              Container(
+                                constraints: BoxConstraints(maxHeight: 150),
+                                child: Scrollbar(
+                                  child: SingleChildScrollView(
+                                    child: Column(
+                                      crossAxisAlignment:
+                                          CrossAxisAlignment.start,
+                                      children: widget
+                                          .state
+                                          .selectedItemQuantities
+                                          .entries
+                                          .map((entry) {
+                                            final item = widget
+                                                .state
+                                                .order
+                                                .orderItems
+                                                .firstWhere(
+                                                  (item) =>
+                                                      item.id == entry.key,
+                                                );
+                                            return Container(
+                                              margin: EdgeInsets.only(
+                                                bottom: 8,
+                                              ),
+                                              padding: EdgeInsets.all(8),
+                                              decoration: BoxDecoration(
+                                                color: Colors.white,
+                                                borderRadius:
+                                                    BorderRadius.circular(6),
+                                                border: Border.all(
+                                                  color: AppColor.success,
+                                                ),
+                                              ),
+                                              child: Row(
+                                                children: [
+                                                  Expanded(
+                                                    child: Column(
+                                                      crossAxisAlignment:
+                                                          CrossAxisAlignment
+                                                              .start,
+                                                      children: [
+                                                        Text(
+                                                          item.productName,
+                                                          style: AppStyle.sm
+                                                              .copyWith(
+                                                                fontWeight:
+                                                                    FontWeight
+                                                                        .w500,
+                                                              ),
+                                                        ),
+                                                        Text(
+                                                          'Qty: ${entry.value}',
+                                                          style: AppStyle.xs
+                                                              .copyWith(
+                                                                color: AppColor
+                                                                    .textSecondary,
+                                                              ),
+                                                        ),
+                                                      ],
+                                                    ),
+                                                  ),
+                                                  Text(
+                                                    ((item.unitPrice) *
+                                                            entry.value)
+                                                        .currencyFormatRpV2,
+                                                    style: AppStyle.xs.copyWith(
+                                                      fontWeight:
+                                                          FontWeight.bold,
+                                                      color: AppColor.error,
+                                                    ),
+                                                  ),
+                                                ],
+                                              ),
+                                            );
+                                          })
+                                          .toList(),
+                                    ),
+                                  ),
+                                ),
+                              ),
+                              Divider(height: 16, thickness: 1),
+                              Container(
+                                padding: EdgeInsets.all(8),
+                                decoration: BoxDecoration(
+                                  color: AppColor.error,
+                                  borderRadius: BorderRadius.circular(6),
+                                ),
+                                child: Row(
+                                  mainAxisAlignment:
+                                      MainAxisAlignment.spaceBetween,
+                                  children: [
+                                    Text(
+                                      'Jumlah Total Void:',
+                                      style: AppStyle.md.copyWith(
+                                        fontWeight: FontWeight.bold,
+                                        color: Colors.white,
+                                      ),
+                                    ),
+                                    Text(
+                                      widget
+                                          .state
+                                          .totalPriceVoid
+                                          .currencyFormatRpV2,
+                                      style: AppStyle.md.copyWith(
+                                        fontWeight: FontWeight.bold,
+                                        color: Colors.white,
+                                      ),
+                                    ),
+                                  ],
+                                ),
+                              ),
+                            ],
+                          ],
+                        ),
+                      ),
+                      SpaceHeight(24),
+                    ],
+
+                    Text(
+                      'Alasan Void *',
+                      style: AppStyle.lg.copyWith(
+                        fontWeight: FontWeight.bold,
+                        color: AppColor.primary,
+                      ),
+                    ),
+                    SpaceHeight(8),
+                    AppTextFormField(
+                      label: 'Harap berikan alasan untuk membatalkan...',
+                      showLabel: false,
+                      maxLines: 4,
+                      onChanged: (value) {
+                        context.read<VoidFormBloc>().add(
+                          VoidFormEvent.voidReasonChanged(value),
+                        );
+                      },
+                    ),
+                    SpaceHeight(32),
+                  ],
+                ),
+              ),
+            ),
+          ),
+
+          // Action Buttons
+          Padding(
+            padding: EdgeInsets.all(20),
+            child: Row(
+              children: [
+                Expanded(
+                  child: AppElevatedButton.outlined(
+                    onPressed: () => context.router.maybePop(),
+                    label: 'Batal',
+                  ),
+                ),
+                SpaceWidth(12),
+                Expanded(
+                  child: AppElevatedButton.filled(
+                    onPressed: _canProcessVoid() ? _processVoid : null,
+                    label: widget.state.voidType.isAll
+                        ? 'Void Pesanan'
+                        : 'Void Produk',
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  bool _canProcessVoid() {
+    if (widget.state.voidReason?.isEmpty ?? true) return false;
+    if (widget.state.voidType.isItem &&
+        widget.state.selectedItemQuantities.isEmpty) {
+      return false;
+    }
+    return true;
+  }
+
+  void _processVoid() {
+    String confirmMessage;
+    if (widget.state.voidType.isAll) {
+      confirmMessage =
+          'Apakah Anda yakin ingin membatalkan seluruh pesanan #${widget.state.order.orderNumber}?\n\nIni akan membatalkan semua item dalam pesanan.';
+    } else {
+      int totalItems = widget.state.selectedItemQuantities.values.fold(
+        0,
+        (sum, qty) => sum + qty,
+      );
+      confirmMessage =
+          'Apakah Anda yakin ingin membatalkan $totalItems item dari pesanan #${widget.state.order.orderNumber}?\n\nJumlah Batal: ${widget.state.totalPriceVoid.currencyFormatRpV2}';
+    }
+
+    showDialog(
+      context: context,
+      barrierDismissible: false,
+      builder: (BuildContext context) {
+        return OrderVoidConfirmDialog(message: confirmMessage);
+      },
+    );
+  }
+}

lib/presentation/router/app_router.dart

@@ -37,5 +37,8 @@ class AppRouter extends RootStackRouter {
     // Payment
     AutoRoute(page: PaymentRoute.page),
     AutoRoute(page: PaymentSuccessRoute.page),
+
+    // Void
+    AutoRoute(page: VoidRoute.page),
   ];
 }

lib/presentation/router/app_router.gr.dart

@@ -9,7 +9,7 @@
 // coverage:ignore-file
 
 // ignore_for_file: no_leading_underscores_for_library_prefixes
-import 'package:apskel_pos_flutter_v2/domain/order/order.dart' as _i18;
+import 'package:apskel_pos_flutter_v2/domain/order/order.dart' as _i19;
 import 'package:apskel_pos_flutter_v2/presentation/pages/auth/login/login_page.dart'
     as _i4;
 import 'package:apskel_pos_flutter_v2/presentation/pages/checkout/checkout_page.dart'
@@ -40,82 +40,84 @@ import 'package:apskel_pos_flutter_v2/presentation/pages/splash/splash_page.dart
     as _i11;
 import 'package:apskel_pos_flutter_v2/presentation/pages/sync/sync_page.dart'
     as _i14;
-import 'package:auto_route/auto_route.dart' as _i16;
+import 'package:apskel_pos_flutter_v2/presentation/pages/void/void_page.dart'
-import 'package:flutter/material.dart' as _i17;
+    as _i16;
+import 'package:auto_route/auto_route.dart' as _i17;
+import 'package:flutter/material.dart' as _i18;
 
 /// generated route for
 /// [_i1.CheckoutPage]
-class CheckoutRoute extends _i16.PageRouteInfo<void> {
+class CheckoutRoute extends _i17.PageRouteInfo<void> {
-  const CheckoutRoute({List<_i16.PageRouteInfo>? children})
+  const CheckoutRoute({List<_i17.PageRouteInfo>? children})
     : super(CheckoutRoute.name, initialChildren: children);
 
   static const String name = 'CheckoutRoute';
 
-  static _i16.PageInfo page = _i16.PageInfo(
+  static _i17.PageInfo page = _i17.PageInfo(
     name,
     builder: (data) {
-      return _i16.WrappedRoute(child: const _i1.CheckoutPage());
+      return _i17.WrappedRoute(child: const _i1.CheckoutPage());
     },
   );
 }
 
 /// generated route for
 /// [_i2.CustomerPage]
-class CustomerRoute extends _i16.PageRouteInfo<void> {
+class CustomerRoute extends _i17.PageRouteInfo<void> {
-  const CustomerRoute({List<_i16.PageRouteInfo>? children})
+  const CustomerRoute({List<_i17.PageRouteInfo>? children})
     : super(CustomerRoute.name, initialChildren: children);
 
   static const String name = 'CustomerRoute';
 
-  static _i16.PageInfo page = _i16.PageInfo(
+  static _i17.PageInfo page = _i17.PageInfo(
     name,
     builder: (data) {
-      return _i16.WrappedRoute(child: const _i2.CustomerPage());
+      return _i17.WrappedRoute(child: const _i2.CustomerPage());
     },
   );
 }
 
 /// generated route for
 /// [_i3.HomePage]
-class HomeRoute extends _i16.PageRouteInfo<void> {
+class HomeRoute extends _i17.PageRouteInfo<void> {
-  const HomeRoute({List<_i16.PageRouteInfo>? children})
+  const HomeRoute({List<_i17.PageRouteInfo>? children})
     : super(HomeRoute.name, initialChildren: children);
 
   static const String name = 'HomeRoute';
 
-  static _i16.PageInfo page = _i16.PageInfo(
+  static _i17.PageInfo page = _i17.PageInfo(
     name,
     builder: (data) {
-      return _i16.WrappedRoute(child: const _i3.HomePage());
+      return _i17.WrappedRoute(child: const _i3.HomePage());
     },
   );
 }
 
 /// generated route for
 /// [_i4.LoginPage]
-class LoginRoute extends _i16.PageRouteInfo<void> {
+class LoginRoute extends _i17.PageRouteInfo<void> {
-  const LoginRoute({List<_i16.PageRouteInfo>? children})
+  const LoginRoute({List<_i17.PageRouteInfo>? children})
     : super(LoginRoute.name, initialChildren: children);
 
   static const String name = 'LoginRoute';
 
-  static _i16.PageInfo page = _i16.PageInfo(
+  static _i17.PageInfo page = _i17.PageInfo(
     name,
     builder: (data) {
-      return _i16.WrappedRoute(child: const _i4.LoginPage());
+      return _i17.WrappedRoute(child: const _i4.LoginPage());
     },
   );
 }
 
 /// generated route for
 /// [_i5.MainPage]
-class MainRoute extends _i16.PageRouteInfo<void> {
+class MainRoute extends _i17.PageRouteInfo<void> {
-  const MainRoute({List<_i16.PageRouteInfo>? children})
+  const MainRoute({List<_i17.PageRouteInfo>? children})
     : super(MainRoute.name, initialChildren: children);
 
   static const String name = 'MainRoute';
 
-  static _i16.PageInfo page = _i16.PageInfo(
+  static _i17.PageInfo page = _i17.PageInfo(
     name,
     builder: (data) {
       return const _i5.MainPage();
@@ -125,11 +127,11 @@ class MainRoute extends _i16.PageRouteInfo<void> {
 
 /// generated route for
 /// [_i6.OrderPage]
-class OrderRoute extends _i16.PageRouteInfo<OrderRouteArgs> {
+class OrderRoute extends _i17.PageRouteInfo<OrderRouteArgs> {
   OrderRoute({
-    _i17.Key? key,
+    _i18.Key? key,
     required String status,
-    List<_i16.PageRouteInfo>? children,
+    List<_i17.PageRouteInfo>? children,
   }) : super(
          OrderRoute.name,
          args: OrderRouteArgs(key: key, status: status),
@@ -138,11 +140,11 @@ class OrderRoute extends _i16.PageRouteInfo<OrderRouteArgs> {
 
   static const String name = 'OrderRoute';
 
-  static _i16.PageInfo page = _i16.PageInfo(
+  static _i17.PageInfo page = _i17.PageInfo(
     name,
     builder: (data) {
       final args = data.argsAs<OrderRouteArgs>();
-      return _i16.WrappedRoute(
+      return _i17.WrappedRoute(
         child: _i6.OrderPage(key: args.key, status: args.status),
       );
     },
@@ -152,7 +154,7 @@ class OrderRoute extends _i16.PageRouteInfo<OrderRouteArgs> {
 class OrderRouteArgs {
   const OrderRouteArgs({this.key, required this.status});
 
-  final _i17.Key? key;
+  final _i18.Key? key;
 
   final String status;
 
@@ -164,11 +166,11 @@ class OrderRouteArgs {
 
 /// generated route for
 /// [_i7.PaymentPage]
-class PaymentRoute extends _i16.PageRouteInfo<PaymentRouteArgs> {
+class PaymentRoute extends _i17.PageRouteInfo<PaymentRouteArgs> {
   PaymentRoute({
-    _i17.Key? key,
+    _i18.Key? key,
-    required _i18.Order order,
+    required _i19.Order order,
-    List<_i16.PageRouteInfo>? children,
+    List<_i17.PageRouteInfo>? children,
   }) : super(
          PaymentRoute.name,
          args: PaymentRouteArgs(key: key, order: order),
@@ -177,11 +179,11 @@ class PaymentRoute extends _i16.PageRouteInfo<PaymentRouteArgs> {
 
   static const String name = 'PaymentRoute';
 
-  static _i16.PageInfo page = _i16.PageInfo(
+  static _i17.PageInfo page = _i17.PageInfo(
     name,
     builder: (data) {
       final args = data.argsAs<PaymentRouteArgs>();
-      return _i16.WrappedRoute(
+      return _i17.WrappedRoute(
         child: _i7.PaymentPage(key: args.key, order: args.order),
       );
     },
@@ -191,9 +193,9 @@ class PaymentRoute extends _i16.PageRouteInfo<PaymentRouteArgs> {
 class PaymentRouteArgs {
   const PaymentRouteArgs({this.key, required this.order});
 
-  final _i17.Key? key;
+  final _i18.Key? key;
 
-  final _i18.Order order;
+  final _i19.Order order;
 
   @override
   String toString() {
@@ -203,11 +205,11 @@ class PaymentRouteArgs {
 
 /// generated route for
 /// [_i8.PaymentSuccessPage]
-class PaymentSuccessRoute extends _i16.PageRouteInfo<PaymentSuccessRouteArgs> {
+class PaymentSuccessRoute extends _i17.PageRouteInfo<PaymentSuccessRouteArgs> {
   PaymentSuccessRoute({
-    _i17.Key? key,
+    _i18.Key? key,
     required String orderId,
-    List<_i16.PageRouteInfo>? children,
+    List<_i17.PageRouteInfo>? children,
   }) : super(
          PaymentSuccessRoute.name,
          args: PaymentSuccessRouteArgs(key: key, orderId: orderId),
@@ -216,11 +218,11 @@ class PaymentSuccessRoute extends _i16.PageRouteInfo<PaymentSuccessRouteArgs> {
 
   static const String name = 'PaymentSuccessRoute';
 
-  static _i16.PageInfo page = _i16.PageInfo(
+  static _i17.PageInfo page = _i17.PageInfo(
     name,
     builder: (data) {
       final args = data.argsAs<PaymentSuccessRouteArgs>();
-      return _i16.WrappedRoute(
+      return _i17.WrappedRoute(
         child: _i8.PaymentSuccessPage(key: args.key, orderId: args.orderId),
       );
     },
@@ -230,7 +232,7 @@ class PaymentSuccessRoute extends _i16.PageRouteInfo<PaymentSuccessRouteArgs> {
 class PaymentSuccessRouteArgs {
   const PaymentSuccessRouteArgs({this.key, required this.orderId});
 
-  final _i17.Key? key;
+  final _i18.Key? key;
 
   final String orderId;
 
@@ -242,13 +244,13 @@ class PaymentSuccessRouteArgs {
 
 /// generated route for
 /// [_i9.ReportPage]
-class ReportRoute extends _i16.PageRouteInfo<void> {
+class ReportRoute extends _i17.PageRouteInfo<void> {
-  const ReportRoute({List<_i16.PageRouteInfo>? children})
+  const ReportRoute({List<_i17.PageRouteInfo>? children})
     : super(ReportRoute.name, initialChildren: children);
 
   static const String name = 'ReportRoute';
 
-  static _i16.PageInfo page = _i16.PageInfo(
+  static _i17.PageInfo page = _i17.PageInfo(
     name,
     builder: (data) {
       return const _i9.ReportPage();
@@ -258,13 +260,13 @@ class ReportRoute extends _i16.PageRouteInfo<void> {
 
 /// generated route for
 /// [_i10.SettingPage]
-class SettingRoute extends _i16.PageRouteInfo<void> {
+class SettingRoute extends _i17.PageRouteInfo<void> {
-  const SettingRoute({List<_i16.PageRouteInfo>? children})
+  const SettingRoute({List<_i17.PageRouteInfo>? children})
     : super(SettingRoute.name, initialChildren: children);
 
   static const String name = 'SettingRoute';
 
-  static _i16.PageInfo page = _i16.PageInfo(
+  static _i17.PageInfo page = _i17.PageInfo(
     name,
     builder: (data) {
       return const _i10.SettingPage();
@@ -274,13 +276,13 @@ class SettingRoute extends _i16.PageRouteInfo<void> {
 
 /// generated route for
 /// [_i11.SplashPage]
-class SplashRoute extends _i16.PageRouteInfo<void> {
+class SplashRoute extends _i17.PageRouteInfo<void> {
-  const SplashRoute({List<_i16.PageRouteInfo>? children})
+  const SplashRoute({List<_i17.PageRouteInfo>? children})
     : super(SplashRoute.name, initialChildren: children);
 
   static const String name = 'SplashRoute';
 
-  static _i16.PageInfo page = _i16.PageInfo(
+  static _i17.PageInfo page = _i17.PageInfo(
     name,
     builder: (data) {
       return const _i11.SplashPage();
@@ -290,13 +292,13 @@ class SplashRoute extends _i16.PageRouteInfo<void> {
 
 /// generated route for
 /// [_i12.SuccessAddItemOrderPage]
-class SuccessAddItemOrderRoute extends _i16.PageRouteInfo<void> {
+class SuccessAddItemOrderRoute extends _i17.PageRouteInfo<void> {
-  const SuccessAddItemOrderRoute({List<_i16.PageRouteInfo>? children})
+  const SuccessAddItemOrderRoute({List<_i17.PageRouteInfo>? children})
     : super(SuccessAddItemOrderRoute.name, initialChildren: children);
 
   static const String name = 'SuccessAddItemOrderRoute';
 
-  static _i16.PageInfo page = _i16.PageInfo(
+  static _i17.PageInfo page = _i17.PageInfo(
     name,
     builder: (data) {
       return const _i12.SuccessAddItemOrderPage();
@@ -306,11 +308,11 @@ class SuccessAddItemOrderRoute extends _i16.PageRouteInfo<void> {
 
 /// generated route for
 /// [_i13.SuccessOrderPage]
-class SuccessOrderRoute extends _i16.PageRouteInfo<SuccessOrderRouteArgs> {
+class SuccessOrderRoute extends _i17.PageRouteInfo<SuccessOrderRouteArgs> {
   SuccessOrderRoute({
-    _i17.Key? key,
+    _i18.Key? key,
-    required _i18.Order order,
+    required _i19.Order order,
-    List<_i16.PageRouteInfo>? children,
+    List<_i17.PageRouteInfo>? children,
   }) : super(
          SuccessOrderRoute.name,
          args: SuccessOrderRouteArgs(key: key, order: order),
@@ -319,11 +321,11 @@ class SuccessOrderRoute extends _i16.PageRouteInfo<SuccessOrderRouteArgs> {
 
   static const String name = 'SuccessOrderRoute';
 
-  static _i16.PageInfo page = _i16.PageInfo(
+  static _i17.PageInfo page = _i17.PageInfo(
     name,
     builder: (data) {
       final args = data.argsAs<SuccessOrderRouteArgs>();
-      return _i16.WrappedRoute(
+      return _i17.WrappedRoute(
         child: _i13.SuccessOrderPage(key: args.key, order: args.order),
       );
     },
@@ -333,9 +335,9 @@ class SuccessOrderRoute extends _i16.PageRouteInfo<SuccessOrderRouteArgs> {
 class SuccessOrderRouteArgs {
   const SuccessOrderRouteArgs({this.key, required this.order});
 
-  final _i17.Key? key;
+  final _i18.Key? key;
 
-  final _i18.Order order;
+  final _i19.Order order;
 
   @override
   String toString() {
@@ -345,32 +347,71 @@ class SuccessOrderRouteArgs {
 
 /// generated route for
 /// [_i14.SyncPage]
-class SyncRoute extends _i16.PageRouteInfo<void> {
+class SyncRoute extends _i17.PageRouteInfo<void> {
-  const SyncRoute({List<_i16.PageRouteInfo>? children})
+  const SyncRoute({List<_i17.PageRouteInfo>? children})
     : super(SyncRoute.name, initialChildren: children);
 
   static const String name = 'SyncRoute';
 
-  static _i16.PageInfo page = _i16.PageInfo(
+  static _i17.PageInfo page = _i17.PageInfo(
     name,
     builder: (data) {
-      return _i16.WrappedRoute(child: const _i14.SyncPage());
+      return _i17.WrappedRoute(child: const _i14.SyncPage());
     },
   );
 }
 
 /// generated route for
 /// [_i15.TablePage]
-class TableRoute extends _i16.PageRouteInfo<void> {
+class TableRoute extends _i17.PageRouteInfo<void> {
-  const TableRoute({List<_i16.PageRouteInfo>? children})
+  const TableRoute({List<_i17.PageRouteInfo>? children})
     : super(TableRoute.name, initialChildren: children);
 
   static const String name = 'TableRoute';
 
-  static _i16.PageInfo page = _i16.PageInfo(
+  static _i17.PageInfo page = _i17.PageInfo(
     name,
     builder: (data) {
-      return _i16.WrappedRoute(child: const _i15.TablePage());
+      return _i17.WrappedRoute(child: const _i15.TablePage());
     },
   );
 }
+
+/// generated route for
+/// [_i16.VoidPage]
+class VoidRoute extends _i17.PageRouteInfo<VoidRouteArgs> {
+  VoidRoute({
+    _i18.Key? key,
+    required _i19.Order order,
+    List<_i17.PageRouteInfo>? children,
+  }) : super(
+         VoidRoute.name,
+         args: VoidRouteArgs(key: key, order: order),
+         initialChildren: children,
+       );
+
+  static const String name = 'VoidRoute';
+
+  static _i17.PageInfo page = _i17.PageInfo(
+    name,
+    builder: (data) {
+      final args = data.argsAs<VoidRouteArgs>();
+      return _i17.WrappedRoute(
+        child: _i16.VoidPage(key: args.key, order: args.order),
+      );
+    },
+  );
+}
+
+class VoidRouteArgs {
+  const VoidRouteArgs({this.key, required this.order});
+
+  final _i18.Key? key;
+
+  final _i19.Order order;
+
+  @override
+  String toString() {
+    return 'VoidRouteArgs{key: $key, order: $order}';
+  }
+}