feat: dashboard

lib/application/analytic/dashboard_analytic_loader/dashboard_analytic_loader_bloc.dart

@@ -0,0 +1,50 @@
+import 'package:bloc/bloc.dart';
+import 'package:dartz/dartz.dart';
+import 'package:freezed_annotation/freezed_annotation.dart';
+import 'package:injectable/injectable.dart';
+
+import '../../../domain/analytic/analytic.dart';
+import '../../../domain/analytic/repositories/i_analytic_repository.dart';
+
+part 'dashboard_analytic_loader_event.dart';
+part 'dashboard_analytic_loader_state.dart';
+part 'dashboard_analytic_loader_bloc.freezed.dart';
+
+@injectable
+class DashboardAnalyticLoaderBloc
+    extends Bloc<DashboardAnalyticLoaderEvent, DashboardAnalyticLoaderState> {
+  final IAnalyticRepository _repository;
+  DashboardAnalyticLoaderBloc(this._repository)
+    : super(DashboardAnalyticLoaderState.initial()) {
+    on<DashboardAnalyticLoaderEvent>(_onDashboardAnalyticLoaderEvent);
+  }
+
+  Future<void> _onDashboardAnalyticLoaderEvent(
+    DashboardAnalyticLoaderEvent event,
+    Emitter<DashboardAnalyticLoaderState> emit,
+  ) {
+    return event.map(
+      fetched: (e) async {
+        emit(
+          state.copyWith(
+            isFetching: true,
+            failureOptionDashboardAnalytic: none(),
+          ),
+        );
+
+        final result = await _repository.getDashboard(
+          dateFrom: DateTime.now().subtract(const Duration(days: 30)),
+          dateTo: DateTime.now(),
+        );
+
+        var data = result.fold(
+          (f) => state.copyWith(failureOptionDashboardAnalytic: optionOf(f)),
+          (dashboardAnalytic) =>
+              state.copyWith(dashboardAnalytic: dashboardAnalytic),
+        );
+
+        emit(data.copyWith(isFetching: false));
+      },
+    );
+  }
+}

lib/application/analytic/dashboard_analytic_loader/dashboard_analytic_loader_bloc.freezed.dart

@@ -0,0 +1,406 @@
+// coverage:ignore-file
+// GENERATED CODE - DO NOT MODIFY BY HAND
+// ignore_for_file: type=lint
+// ignore_for_file: unused_element, deprecated_member_use, deprecated_member_use_from_same_package, use_function_type_syntax_for_parameters, unnecessary_const, avoid_init_to_null, invalid_override_different_default_values_named, prefer_expression_function_bodies, annotate_overrides, invalid_annotation_target, unnecessary_question_mark
+
+part of 'dashboard_analytic_loader_bloc.dart';
+
+// **************************************************************************
+// FreezedGenerator
+// **************************************************************************
+
+T _$identity<T>(T value) => value;
+
+final _privateConstructorUsedError = UnsupportedError(
+  'It seems like you constructed your class using `MyClass._()`. This constructor is only meant to be used by freezed and you are not supposed to need it nor use it.\nPlease check the documentation here for more information: https://github.com/rrousselGit/freezed#adding-getters-and-methods-to-our-models',
+);
+
+/// @nodoc
+mixin _$DashboardAnalyticLoaderEvent {
+  @optionalTypeArgs
+  TResult when<TResult extends Object?>({
+    required TResult Function() fetched,
+  }) => throw _privateConstructorUsedError;
+  @optionalTypeArgs
+  TResult? whenOrNull<TResult extends Object?>({
+    TResult? Function()? fetched,
+  }) => throw _privateConstructorUsedError;
+  @optionalTypeArgs
+  TResult maybeWhen<TResult extends Object?>({
+    TResult Function()? fetched,
+    required TResult orElse(),
+  }) => throw _privateConstructorUsedError;
+  @optionalTypeArgs
+  TResult map<TResult extends Object?>({
+    required TResult Function(_Fetched value) fetched,
+  }) => throw _privateConstructorUsedError;
+  @optionalTypeArgs
+  TResult? mapOrNull<TResult extends Object?>({
+    TResult? Function(_Fetched value)? fetched,
+  }) => throw _privateConstructorUsedError;
+  @optionalTypeArgs
+  TResult maybeMap<TResult extends Object?>({
+    TResult Function(_Fetched value)? fetched,
+    required TResult orElse(),
+  }) => throw _privateConstructorUsedError;
+}
+
+/// @nodoc
+abstract class $DashboardAnalyticLoaderEventCopyWith<$Res> {
+  factory $DashboardAnalyticLoaderEventCopyWith(
+    DashboardAnalyticLoaderEvent value,
+    $Res Function(DashboardAnalyticLoaderEvent) then,
+  ) =
+      _$DashboardAnalyticLoaderEventCopyWithImpl<
+        $Res,
+        DashboardAnalyticLoaderEvent
+      >;
+}
+
+/// @nodoc
+class _$DashboardAnalyticLoaderEventCopyWithImpl<
+  $Res,
+  $Val extends DashboardAnalyticLoaderEvent
+>
+    implements $DashboardAnalyticLoaderEventCopyWith<$Res> {
+  _$DashboardAnalyticLoaderEventCopyWithImpl(this._value, this._then);
+
+  // ignore: unused_field
+  final $Val _value;
+  // ignore: unused_field
+  final $Res Function($Val) _then;
+
+  /// Create a copy of DashboardAnalyticLoaderEvent
+  /// with the given fields replaced by the non-null parameter values.
+}
+
+/// @nodoc
+abstract class _$$FetchedImplCopyWith<$Res> {
+  factory _$$FetchedImplCopyWith(
+    _$FetchedImpl value,
+    $Res Function(_$FetchedImpl) then,
+  ) = __$$FetchedImplCopyWithImpl<$Res>;
+}
+
+/// @nodoc
+class __$$FetchedImplCopyWithImpl<$Res>
+    extends _$DashboardAnalyticLoaderEventCopyWithImpl<$Res, _$FetchedImpl>
+    implements _$$FetchedImplCopyWith<$Res> {
+  __$$FetchedImplCopyWithImpl(
+    _$FetchedImpl _value,
+    $Res Function(_$FetchedImpl) _then,
+  ) : super(_value, _then);
+
+  /// Create a copy of DashboardAnalyticLoaderEvent
+  /// with the given fields replaced by the non-null parameter values.
+}
+
+/// @nodoc
+
+class _$FetchedImpl implements _Fetched {
+  const _$FetchedImpl();
+
+  @override
+  String toString() {
+    return 'DashboardAnalyticLoaderEvent.fetched()';
+  }
+
+  @override
+  bool operator ==(Object other) {
+    return identical(this, other) ||
+        (other.runtimeType == runtimeType && other is _$FetchedImpl);
+  }
+
+  @override
+  int get hashCode => runtimeType.hashCode;
+
+  @override
+  @optionalTypeArgs
+  TResult when<TResult extends Object?>({required TResult Function() fetched}) {
+    return fetched();
+  }
+
+  @override
+  @optionalTypeArgs
+  TResult? whenOrNull<TResult extends Object?>({TResult? Function()? fetched}) {
+    return fetched?.call();
+  }
+
+  @override
+  @optionalTypeArgs
+  TResult maybeWhen<TResult extends Object?>({
+    TResult Function()? fetched,
+    required TResult orElse(),
+  }) {
+    if (fetched != null) {
+      return fetched();
+    }
+    return orElse();
+  }
+
+  @override
+  @optionalTypeArgs
+  TResult map<TResult extends Object?>({
+    required TResult Function(_Fetched value) fetched,
+  }) {
+    return fetched(this);
+  }
+
+  @override
+  @optionalTypeArgs
+  TResult? mapOrNull<TResult extends Object?>({
+    TResult? Function(_Fetched value)? fetched,
+  }) {
+    return fetched?.call(this);
+  }
+
+  @override
+  @optionalTypeArgs
+  TResult maybeMap<TResult extends Object?>({
+    TResult Function(_Fetched value)? fetched,
+    required TResult orElse(),
+  }) {
+    if (fetched != null) {
+      return fetched(this);
+    }
+    return orElse();
+  }
+}
+
+abstract class _Fetched implements DashboardAnalyticLoaderEvent {
+  const factory _Fetched() = _$FetchedImpl;
+}
+
+/// @nodoc
+mixin _$DashboardAnalyticLoaderState {
+  DashboardAnalytic get dashboardAnalytic => throw _privateConstructorUsedError;
+  Option<AnalyticFailure> get failureOptionDashboardAnalytic =>
+      throw _privateConstructorUsedError;
+  bool get isFetching => throw _privateConstructorUsedError;
+
+  /// Create a copy of DashboardAnalyticLoaderState
+  /// with the given fields replaced by the non-null parameter values.
+  @JsonKey(includeFromJson: false, includeToJson: false)
+  $DashboardAnalyticLoaderStateCopyWith<DashboardAnalyticLoaderState>
+  get copyWith => throw _privateConstructorUsedError;
+}
+
+/// @nodoc
+abstract class $DashboardAnalyticLoaderStateCopyWith<$Res> {
+  factory $DashboardAnalyticLoaderStateCopyWith(
+    DashboardAnalyticLoaderState value,
+    $Res Function(DashboardAnalyticLoaderState) then,
+  ) =
+      _$DashboardAnalyticLoaderStateCopyWithImpl<
+        $Res,
+        DashboardAnalyticLoaderState
+      >;
+  @useResult
+  $Res call({
+    DashboardAnalytic dashboardAnalytic,
+    Option<AnalyticFailure> failureOptionDashboardAnalytic,
+    bool isFetching,
+  });
+
+  $DashboardAnalyticCopyWith<$Res> get dashboardAnalytic;
+}
+
+/// @nodoc
+class _$DashboardAnalyticLoaderStateCopyWithImpl<
+  $Res,
+  $Val extends DashboardAnalyticLoaderState
+>
+    implements $DashboardAnalyticLoaderStateCopyWith<$Res> {
+  _$DashboardAnalyticLoaderStateCopyWithImpl(this._value, this._then);
+
+  // ignore: unused_field
+  final $Val _value;
+  // ignore: unused_field
+  final $Res Function($Val) _then;
+
+  /// Create a copy of DashboardAnalyticLoaderState
+  /// with the given fields replaced by the non-null parameter values.
+  @pragma('vm:prefer-inline')
+  @override
+  $Res call({
+    Object? dashboardAnalytic = null,
+    Object? failureOptionDashboardAnalytic = null,
+    Object? isFetching = null,
+  }) {
+    return _then(
+      _value.copyWith(
+            dashboardAnalytic: null == dashboardAnalytic
+                ? _value.dashboardAnalytic
+                : dashboardAnalytic // ignore: cast_nullable_to_non_nullable
+                      as DashboardAnalytic,
+            failureOptionDashboardAnalytic:
+                null == failureOptionDashboardAnalytic
+                ? _value.failureOptionDashboardAnalytic
+                : failureOptionDashboardAnalytic // ignore: cast_nullable_to_non_nullable
+                      as Option<AnalyticFailure>,
+            isFetching: null == isFetching
+                ? _value.isFetching
+                : isFetching // ignore: cast_nullable_to_non_nullable
+                      as bool,
+          )
+          as $Val,
+    );
+  }
+
+  /// Create a copy of DashboardAnalyticLoaderState
+  /// with the given fields replaced by the non-null parameter values.
+  @override
+  @pragma('vm:prefer-inline')
+  $DashboardAnalyticCopyWith<$Res> get dashboardAnalytic {
+    return $DashboardAnalyticCopyWith<$Res>(_value.dashboardAnalytic, (value) {
+      return _then(_value.copyWith(dashboardAnalytic: value) as $Val);
+    });
+  }
+}
+
+/// @nodoc
+abstract class _$$DashboardAnalyticLoaderStateImplCopyWith<$Res>
+    implements $DashboardAnalyticLoaderStateCopyWith<$Res> {
+  factory _$$DashboardAnalyticLoaderStateImplCopyWith(
+    _$DashboardAnalyticLoaderStateImpl value,
+    $Res Function(_$DashboardAnalyticLoaderStateImpl) then,
+  ) = __$$DashboardAnalyticLoaderStateImplCopyWithImpl<$Res>;
+  @override
+  @useResult
+  $Res call({
+    DashboardAnalytic dashboardAnalytic,
+    Option<AnalyticFailure> failureOptionDashboardAnalytic,
+    bool isFetching,
+  });
+
+  @override
+  $DashboardAnalyticCopyWith<$Res> get dashboardAnalytic;
+}
+
+/// @nodoc
+class __$$DashboardAnalyticLoaderStateImplCopyWithImpl<$Res>
+    extends
+        _$DashboardAnalyticLoaderStateCopyWithImpl<
+          $Res,
+          _$DashboardAnalyticLoaderStateImpl
+        >
+    implements _$$DashboardAnalyticLoaderStateImplCopyWith<$Res> {
+  __$$DashboardAnalyticLoaderStateImplCopyWithImpl(
+    _$DashboardAnalyticLoaderStateImpl _value,
+    $Res Function(_$DashboardAnalyticLoaderStateImpl) _then,
+  ) : super(_value, _then);
+
+  /// Create a copy of DashboardAnalyticLoaderState
+  /// with the given fields replaced by the non-null parameter values.
+  @pragma('vm:prefer-inline')
+  @override
+  $Res call({
+    Object? dashboardAnalytic = null,
+    Object? failureOptionDashboardAnalytic = null,
+    Object? isFetching = null,
+  }) {
+    return _then(
+      _$DashboardAnalyticLoaderStateImpl(
+        dashboardAnalytic: null == dashboardAnalytic
+            ? _value.dashboardAnalytic
+            : dashboardAnalytic // ignore: cast_nullable_to_non_nullable
+                  as DashboardAnalytic,
+        failureOptionDashboardAnalytic: null == failureOptionDashboardAnalytic
+            ? _value.failureOptionDashboardAnalytic
+            : failureOptionDashboardAnalytic // ignore: cast_nullable_to_non_nullable
+                  as Option<AnalyticFailure>,
+        isFetching: null == isFetching
+            ? _value.isFetching
+            : isFetching // ignore: cast_nullable_to_non_nullable
+                  as bool,
+      ),
+    );
+  }
+}
+
+/// @nodoc
+
+class _$DashboardAnalyticLoaderStateImpl
+    implements _DashboardAnalyticLoaderState {
+  const _$DashboardAnalyticLoaderStateImpl({
+    required this.dashboardAnalytic,
+    required this.failureOptionDashboardAnalytic,
+    this.isFetching = false,
+  });
+
+  @override
+  final DashboardAnalytic dashboardAnalytic;
+  @override
+  final Option<AnalyticFailure> failureOptionDashboardAnalytic;
+  @override
+  @JsonKey()
+  final bool isFetching;
+
+  @override
+  String toString() {
+    return 'DashboardAnalyticLoaderState(dashboardAnalytic: $dashboardAnalytic, failureOptionDashboardAnalytic: $failureOptionDashboardAnalytic, isFetching: $isFetching)';
+  }
+
+  @override
+  bool operator ==(Object other) {
+    return identical(this, other) ||
+        (other.runtimeType == runtimeType &&
+            other is _$DashboardAnalyticLoaderStateImpl &&
+            (identical(other.dashboardAnalytic, dashboardAnalytic) ||
+                other.dashboardAnalytic == dashboardAnalytic) &&
+            (identical(
+                  other.failureOptionDashboardAnalytic,
+                  failureOptionDashboardAnalytic,
+                ) ||
+                other.failureOptionDashboardAnalytic ==
+                    failureOptionDashboardAnalytic) &&
+            (identical(other.isFetching, isFetching) ||
+                other.isFetching == isFetching));
+  }
+
+  @override
+  int get hashCode => Object.hash(
+    runtimeType,
+    dashboardAnalytic,
+    failureOptionDashboardAnalytic,
+    isFetching,
+  );
+
+  /// Create a copy of DashboardAnalyticLoaderState
+  /// with the given fields replaced by the non-null parameter values.
+  @JsonKey(includeFromJson: false, includeToJson: false)
+  @override
+  @pragma('vm:prefer-inline')
+  _$$DashboardAnalyticLoaderStateImplCopyWith<
+    _$DashboardAnalyticLoaderStateImpl
+  >
+  get copyWith =>
+      __$$DashboardAnalyticLoaderStateImplCopyWithImpl<
+        _$DashboardAnalyticLoaderStateImpl
+      >(this, _$identity);
+}
+
+abstract class _DashboardAnalyticLoaderState
+    implements DashboardAnalyticLoaderState {
+  const factory _DashboardAnalyticLoaderState({
+    required final DashboardAnalytic dashboardAnalytic,
+    required final Option<AnalyticFailure> failureOptionDashboardAnalytic,
+    final bool isFetching,
+  }) = _$DashboardAnalyticLoaderStateImpl;
+
+  @override
+  DashboardAnalytic get dashboardAnalytic;
+  @override
+  Option<AnalyticFailure> get failureOptionDashboardAnalytic;
+  @override
+  bool get isFetching;
+
+  /// Create a copy of DashboardAnalyticLoaderState
+  /// with the given fields replaced by the non-null parameter values.
+  @override
+  @JsonKey(includeFromJson: false, includeToJson: false)
+  _$$DashboardAnalyticLoaderStateImplCopyWith<
+    _$DashboardAnalyticLoaderStateImpl
+  >
+  get copyWith => throw _privateConstructorUsedError;
+}

lib/application/analytic/dashboard_analytic_loader/dashboard_analytic_loader_event.dart

@@ -0,0 +1,6 @@
+part of 'dashboard_analytic_loader_bloc.dart';
+
+@freezed
+class DashboardAnalyticLoaderEvent with _$DashboardAnalyticLoaderEvent {
+  const factory DashboardAnalyticLoaderEvent.fetched() = _Fetched;
+}

lib/application/analytic/dashboard_analytic_loader/dashboard_analytic_loader_state.dart

@@ -0,0 +1,16 @@
+part of 'dashboard_analytic_loader_bloc.dart';
+
+@freezed
+class DashboardAnalyticLoaderState with _$DashboardAnalyticLoaderState {
+  const factory DashboardAnalyticLoaderState({
+    required DashboardAnalytic dashboardAnalytic,
+    required Option<AnalyticFailure> failureOptionDashboardAnalytic,
+    @Default(false) bool isFetching,
+  }) = _DashboardAnalyticLoaderState;
+
+  factory DashboardAnalyticLoaderState.initial() =>
+      DashboardAnalyticLoaderState(
+        dashboardAnalytic: DashboardAnalytic.empty(),
+        failureOptionDashboardAnalytic: none(),
+      );
+}

lib/common/url/api_path.dart

@@ -7,6 +7,7 @@ class ApiPath {
   static const String salesAnalytic = '/api/v1/analytics/sales';
   static const String profitLossAnalytic = '/api/v1/analytics/profit-loss';
   static const String categoryAnalytic = '/api/v1/analytics/categories';
+  static const String dashboardAnalytic = '/api/v1/analytics/dashboard';
 
   // Inventory
   static const String inventoryReportDetail =

lib/domain/analytic/analytic.dart

@@ -8,4 +8,5 @@ part 'entities/sales_analytic_entity.dart';
 part 'entities/profit_loss_analytic_entity.dart';
 part 'entities/category_analytic_entity.dart';
 part 'entities/inventory_analytic_entity.dart';
+part 'entities/dashboard_analytic_entity.dart';
 part 'failures/analytic_failure.dart';

lib/domain/analytic/entities/dashboard_analytic_entity.dart

@@ -0,0 +1,118 @@
+part of '../analytic.dart';
+
+@freezed
+class DashboardAnalytic with _$DashboardAnalytic {
+  const factory DashboardAnalytic({
+    required String organizationId,
+    required String outletId,
+    required String dateFrom,
+    required String dateTo,
+    required DashboardOverview overview,
+    required List<DashboardTopProduct> topProducts,
+    required List<DashboardPaymentMethod> paymentMethods,
+    required List<DashboardRecentSale> recentSales,
+  }) = _DashboardAnalytic;
+
+  factory DashboardAnalytic.empty() => DashboardAnalytic(
+    organizationId: '',
+    outletId: '',
+    dateFrom: '',
+    dateTo: '',
+    overview: DashboardOverview.empty(),
+    topProducts: const [],
+    paymentMethods: const [],
+    recentSales: const [],
+  );
+}
+
+@freezed
+class DashboardOverview with _$DashboardOverview {
+  const factory DashboardOverview({
+    required int totalSales,
+    required int totalOrders,
+    required double averageOrderValue,
+    required int totalCustomers,
+    required int voidedOrders,
+    required int refundedOrders,
+  }) = _DashboardOverview;
+
+  factory DashboardOverview.empty() => const DashboardOverview(
+    totalSales: 0,
+    totalOrders: 0,
+    averageOrderValue: 0.0,
+    totalCustomers: 0,
+    voidedOrders: 0,
+    refundedOrders: 0,
+  );
+}
+
+@freezed
+class DashboardTopProduct with _$DashboardTopProduct {
+  const factory DashboardTopProduct({
+    required String productId,
+    required String productName,
+    required String categoryId,
+    required String categoryName,
+    required int quantitySold,
+    required int revenue,
+    required double averagePrice,
+    required int orderCount,
+  }) = _DashboardTopProduct;
+
+  factory DashboardTopProduct.empty() => const DashboardTopProduct(
+    productId: '',
+    productName: '',
+    categoryId: '',
+    categoryName: '',
+    quantitySold: 0,
+    revenue: 0,
+    averagePrice: 0.0,
+    orderCount: 0,
+  );
+}
+
+@freezed
+class DashboardPaymentMethod with _$DashboardPaymentMethod {
+  const factory DashboardPaymentMethod({
+    required String paymentMethodId,
+    required String paymentMethodName,
+    required String paymentMethodType,
+    required int totalAmount,
+    required int orderCount,
+    required int paymentCount,
+    required double percentage,
+  }) = _DashboardPaymentMethod;
+
+  factory DashboardPaymentMethod.empty() => const DashboardPaymentMethod(
+    paymentMethodId: '',
+    paymentMethodName: '',
+    paymentMethodType: '',
+    totalAmount: 0,
+    orderCount: 0,
+    paymentCount: 0,
+    percentage: 0.0,
+  );
+}
+
+@freezed
+class DashboardRecentSale with _$DashboardRecentSale {
+  const factory DashboardRecentSale({
+    required String date,
+    required int sales,
+    required int orders,
+    required int items,
+    required int tax,
+    required int discount,
+    required int netSales,
+  }) = _DashboardRecentSale;
+
+  factory DashboardRecentSale.empty() => const DashboardRecentSale(
+    date: '',
+    sales: 0,
+    orders: 0,
+    items: 0,
+    tax: 0,
+    discount: 0,
+    netSales: 0,
+  );
+}

lib/domain/analytic/repositories/i_analytic_repository.dart

@@ -22,4 +22,9 @@ abstract class IAnalyticRepository {
     required DateTime dateFrom,
     required DateTime dateTo,
   });
+
+  Future<Either<AnalyticFailure, DashboardAnalytic>> getDashboard({
+    required DateTime dateFrom,
+    required DateTime dateTo,
+  });
 }

lib/infrastructure/analytic/analytic_dtos.dart

@@ -9,3 +9,4 @@ part 'dto/sales_analytic_dto.dart';
 part 'dto/profit_loss_analytic_dto.dart';
 part 'dto/category_analytic_dto.dart';
 part 'dto/inventory_analytic_dto.dart';
+part 'dto/dashboard_analytic_dto.dart';

lib/infrastructure/analytic/analytic_dtos.g.dart

@@ -385,3 +385,135 @@ Map<String, dynamic> _$$InventoryIngredientDtoImplToJson(
   'is_zero_stock': instance.isZeroStock,
   'updated_at': instance.updatedAt,
 };
+
+_$DashboardAnalyticDtoImpl _$$DashboardAnalyticDtoImplFromJson(
+  Map<String, dynamic> json,
+) => _$DashboardAnalyticDtoImpl(
+  organizationId: json['organization_id'] as String?,
+  outletId: json['outlet_id'] as String?,
+  dateFrom: json['date_from'] as String?,
+  dateTo: json['date_to'] as String?,
+  overview: json['overview'] == null
+      ? null
+      : DashboardOverviewDto.fromJson(json['overview'] as Map<String, dynamic>),
+  topProducts: (json['top_products'] as List<dynamic>?)
+      ?.map((e) => DashboardTopProductDto.fromJson(e as Map<String, dynamic>))
+      .toList(),
+  paymentMethods: (json['payment_methods'] as List<dynamic>?)
+      ?.map(
+        (e) => DashboardPaymentMethodDto.fromJson(e as Map<String, dynamic>),
+      )
+      .toList(),
+  recentSales: (json['recent_sales'] as List<dynamic>?)
+      ?.map((e) => DashboardRecentSaleDto.fromJson(e as Map<String, dynamic>))
+      .toList(),
+);
+
+Map<String, dynamic> _$$DashboardAnalyticDtoImplToJson(
+  _$DashboardAnalyticDtoImpl instance,
+) => <String, dynamic>{
+  'organization_id': instance.organizationId,
+  'outlet_id': instance.outletId,
+  'date_from': instance.dateFrom,
+  'date_to': instance.dateTo,
+  'overview': instance.overview,
+  'top_products': instance.topProducts,
+  'payment_methods': instance.paymentMethods,
+  'recent_sales': instance.recentSales,
+};
+
+_$DashboardOverviewDtoImpl _$$DashboardOverviewDtoImplFromJson(
+  Map<String, dynamic> json,
+) => _$DashboardOverviewDtoImpl(
+  totalSales: (json['total_sales'] as num?)?.toInt(),
+  totalOrders: (json['total_orders'] as num?)?.toInt(),
+  averageOrderValue: (json['average_order_value'] as num?)?.toDouble(),
+  totalCustomers: (json['total_customers'] as num?)?.toInt(),
+  voidedOrders: (json['voided_orders'] as num?)?.toInt(),
+  refundedOrders: (json['refunded_orders'] as num?)?.toInt(),
+);
+
+Map<String, dynamic> _$$DashboardOverviewDtoImplToJson(
+  _$DashboardOverviewDtoImpl instance,
+) => <String, dynamic>{
+  'total_sales': instance.totalSales,
+  'total_orders': instance.totalOrders,
+  'average_order_value': instance.averageOrderValue,
+  'total_customers': instance.totalCustomers,
+  'voided_orders': instance.voidedOrders,
+  'refunded_orders': instance.refundedOrders,
+};
+
+_$DashboardTopProductDtoImpl _$$DashboardTopProductDtoImplFromJson(
+  Map<String, dynamic> json,
+) => _$DashboardTopProductDtoImpl(
+  productId: json['product_id'] as String?,
+  productName: json['product_name'] as String?,
+  categoryId: json['category_id'] as String?,
+  categoryName: json['category_name'] as String?,
+  quantitySold: (json['quantity_sold'] as num?)?.toInt(),
+  revenue: (json['revenue'] as num?)?.toInt(),
+  averagePrice: (json['average_price'] as num?)?.toDouble(),
+  orderCount: (json['order_count'] as num?)?.toInt(),
+);
+
+Map<String, dynamic> _$$DashboardTopProductDtoImplToJson(
+  _$DashboardTopProductDtoImpl instance,
+) => <String, dynamic>{
+  'product_id': instance.productId,
+  'product_name': instance.productName,
+  'category_id': instance.categoryId,
+  'category_name': instance.categoryName,
+  'quantity_sold': instance.quantitySold,
+  'revenue': instance.revenue,
+  'average_price': instance.averagePrice,
+  'order_count': instance.orderCount,
+};
+
+_$DashboardPaymentMethodDtoImpl _$$DashboardPaymentMethodDtoImplFromJson(
+  Map<String, dynamic> json,
+) => _$DashboardPaymentMethodDtoImpl(
+  paymentMethodId: json['payment_method_id'] as String?,
+  paymentMethodName: json['payment_method_name'] as String?,
+  paymentMethodType: json['payment_method_type'] as String?,
+  totalAmount: (json['total_amount'] as num?)?.toInt(),
+  orderCount: (json['order_count'] as num?)?.toInt(),
+  paymentCount: (json['payment_count'] as num?)?.toInt(),
+  percentage: (json['percentage'] as num?)?.toDouble(),
+);
+
+Map<String, dynamic> _$$DashboardPaymentMethodDtoImplToJson(
+  _$DashboardPaymentMethodDtoImpl instance,
+) => <String, dynamic>{
+  'payment_method_id': instance.paymentMethodId,
+  'payment_method_name': instance.paymentMethodName,
+  'payment_method_type': instance.paymentMethodType,
+  'total_amount': instance.totalAmount,
+  'order_count': instance.orderCount,
+  'payment_count': instance.paymentCount,
+  'percentage': instance.percentage,
+};
+
+_$DashboardRecentSaleDtoImpl _$$DashboardRecentSaleDtoImplFromJson(
+  Map<String, dynamic> json,
+) => _$DashboardRecentSaleDtoImpl(
+  date: json['date'] as String?,
+  sales: (json['sales'] as num?)?.toInt(),
+  orders: (json['orders'] as num?)?.toInt(),
+  items: (json['items'] as num?)?.toInt(),
+  tax: (json['tax'] as num?)?.toInt(),
+  discount: (json['discount'] as num?)?.toInt(),
+  netSales: (json['net_sales'] as num?)?.toInt(),
+);
+
+Map<String, dynamic> _$$DashboardRecentSaleDtoImplToJson(
+  _$DashboardRecentSaleDtoImpl instance,
+) => <String, dynamic>{
+  'date': instance.date,
+  'sales': instance.sales,
+  'orders': instance.orders,
+  'items': instance.items,
+  'tax': instance.tax,
+  'discount': instance.discount,
+  'net_sales': instance.netSales,
+};

lib/infrastructure/analytic/datasource/remote_data_provider.dart

@@ -126,4 +126,32 @@ class AnalyticRemoteDataProvider {
       return DC.error(AnalyticFailure.serverError(e));
     }
   }
+
+  Future<DC<AnalyticFailure, DashboardAnalyticDto>> fetchDashboard({
+    required String outletId,
+    required DateTime dateFrom,
+    required DateTime dateTo,
+  }) async {
+    try {
+      final response = await _apiClient.get(
+        ApiPath.dashboardAnalytic,
+        params: {
+          'date_from': dateFrom.toServerDate,
+          'date_to': dateTo.toServerDate,
+        },
+        headers: getAuthorizationHeader(),
+      );
+
+      if (response.data['data'] == null) {
+        return DC.error(AnalyticFailure.empty());
+      }
+
+      final dto = DashboardAnalyticDto.fromJson(response.data['data']);
+
+      return DC.data(dto);
+    } on ApiFailure catch (e, s) {
+      log('fetchDashboardError', name: _logName, error: e, stackTrace: s);
+      return DC.error(AnalyticFailure.serverError(e));
+    }
+  }
 }

lib/infrastructure/analytic/dto/dashboard_analytic_dto.dart

@@ -0,0 +1,145 @@
+part of '../analytic_dtos.dart';
+
+@freezed
+class DashboardAnalyticDto with _$DashboardAnalyticDto {
+  const DashboardAnalyticDto._();
+
+  const factory DashboardAnalyticDto({
+    @JsonKey(name: 'organization_id') String? organizationId,
+    @JsonKey(name: 'outlet_id') String? outletId,
+    @JsonKey(name: 'date_from') String? dateFrom,
+    @JsonKey(name: 'date_to') String? dateTo,
+    @JsonKey(name: 'overview') DashboardOverviewDto? overview,
+    @JsonKey(name: 'top_products') List<DashboardTopProductDto>? topProducts,
+    @JsonKey(name: 'payment_methods')
+    List<DashboardPaymentMethodDto>? paymentMethods,
+    @JsonKey(name: 'recent_sales') List<DashboardRecentSaleDto>? recentSales,
+  }) = _DashboardAnalyticDto;
+
+  factory DashboardAnalyticDto.fromJson(Map<String, dynamic> json) =>
+      _$DashboardAnalyticDtoFromJson(json);
+
+  DashboardAnalytic toDomain() => DashboardAnalytic(
+    organizationId: organizationId ?? '',
+    outletId: outletId ?? '',
+    dateFrom: dateFrom ?? '',
+    dateTo: dateTo ?? '',
+    overview: overview?.toDomain() ?? DashboardOverview.empty(),
+    topProducts: topProducts?.map((e) => e.toDomain()).toList() ?? [],
+    paymentMethods: paymentMethods?.map((e) => e.toDomain()).toList() ?? [],
+    recentSales: recentSales?.map((e) => e.toDomain()).toList() ?? [],
+  );
+}
+
+@freezed
+class DashboardOverviewDto with _$DashboardOverviewDto {
+  const DashboardOverviewDto._();
+
+  const factory DashboardOverviewDto({
+    @JsonKey(name: 'total_sales') int? totalSales,
+    @JsonKey(name: 'total_orders') int? totalOrders,
+    @JsonKey(name: 'average_order_value') double? averageOrderValue,
+    @JsonKey(name: 'total_customers') int? totalCustomers,
+    @JsonKey(name: 'voided_orders') int? voidedOrders,
+    @JsonKey(name: 'refunded_orders') int? refundedOrders,
+  }) = _DashboardOverviewDto;
+
+  factory DashboardOverviewDto.fromJson(Map<String, dynamic> json) =>
+      _$DashboardOverviewDtoFromJson(json);
+
+  DashboardOverview toDomain() => DashboardOverview(
+    totalSales: totalSales ?? 0,
+    totalOrders: totalOrders ?? 0,
+    averageOrderValue: averageOrderValue ?? 0.0,
+    totalCustomers: totalCustomers ?? 0,
+    voidedOrders: voidedOrders ?? 0,
+    refundedOrders: refundedOrders ?? 0,
+  );
+}
+
+@freezed
+class DashboardTopProductDto with _$DashboardTopProductDto {
+  const DashboardTopProductDto._();
+
+  const factory DashboardTopProductDto({
+    @JsonKey(name: 'product_id') String? productId,
+    @JsonKey(name: 'product_name') String? productName,
+    @JsonKey(name: 'category_id') String? categoryId,
+    @JsonKey(name: 'category_name') String? categoryName,
+    @JsonKey(name: 'quantity_sold') int? quantitySold,
+    @JsonKey(name: 'revenue') int? revenue,
+    @JsonKey(name: 'average_price') double? averagePrice,
+    @JsonKey(name: 'order_count') int? orderCount,
+  }) = _DashboardTopProductDto;
+
+  factory DashboardTopProductDto.fromJson(Map<String, dynamic> json) =>
+      _$DashboardTopProductDtoFromJson(json);
+
+  DashboardTopProduct toDomain() => DashboardTopProduct(
+    productId: productId ?? '',
+    productName: productName ?? '',
+    categoryId: categoryId ?? '',
+    categoryName: categoryName ?? '',
+    quantitySold: quantitySold ?? 0,
+    revenue: revenue ?? 0,
+    averagePrice: averagePrice ?? 0.0,
+    orderCount: orderCount ?? 0,
+  );
+}
+
+@freezed
+class DashboardPaymentMethodDto with _$DashboardPaymentMethodDto {
+  const DashboardPaymentMethodDto._();
+
+  const factory DashboardPaymentMethodDto({
+    @JsonKey(name: 'payment_method_id') String? paymentMethodId,
+    @JsonKey(name: 'payment_method_name') String? paymentMethodName,
+    @JsonKey(name: 'payment_method_type') String? paymentMethodType,
+    @JsonKey(name: 'total_amount') int? totalAmount,
+    @JsonKey(name: 'order_count') int? orderCount,
+    @JsonKey(name: 'payment_count') int? paymentCount,
+    @JsonKey(name: 'percentage') double? percentage,
+  }) = _DashboardPaymentMethodDto;
+
+  factory DashboardPaymentMethodDto.fromJson(Map<String, dynamic> json) =>
+      _$DashboardPaymentMethodDtoFromJson(json);
+
+  DashboardPaymentMethod toDomain() => DashboardPaymentMethod(
+    paymentMethodId: paymentMethodId ?? '',
+    paymentMethodName: paymentMethodName ?? '',
+    paymentMethodType: paymentMethodType ?? '',
+    totalAmount: totalAmount ?? 0,
+    orderCount: orderCount ?? 0,
+    paymentCount: paymentCount ?? 0,
+    percentage: percentage ?? 0.0,
+  );
+}
+
+/// ===================== RECENT SALE DTO =====================
+@freezed
+class DashboardRecentSaleDto with _$DashboardRecentSaleDto {
+  const DashboardRecentSaleDto._();
+
+  const factory DashboardRecentSaleDto({
+    @JsonKey(name: 'date') String? date,
+    @JsonKey(name: 'sales') int? sales,
+    @JsonKey(name: 'orders') int? orders,
+    @JsonKey(name: 'items') int? items,
+    @JsonKey(name: 'tax') int? tax,
+    @JsonKey(name: 'discount') int? discount,
+    @JsonKey(name: 'net_sales') int? netSales,
+  }) = _DashboardRecentSaleDto;
+
+  factory DashboardRecentSaleDto.fromJson(Map<String, dynamic> json) =>
+      _$DashboardRecentSaleDtoFromJson(json);
+
+  DashboardRecentSale toDomain() => DashboardRecentSale(
+    date: date ?? '',
+    sales: sales ?? 0,
+    orders: orders ?? 0,
+    items: items ?? 0,
+    tax: tax ?? 0,
+    discount: discount ?? 0,
+    netSales: netSales ?? 0,
+  );
+}

lib/infrastructure/analytic/repositories/analytic_repository.dart

@@ -115,4 +115,31 @@ class AnalyticRepository implements IAnalyticRepository {
       return left(const AnalyticFailure.unexpectedError());
     }
   }
+
+  @override
+  Future<Either<AnalyticFailure, DashboardAnalytic>> getDashboard({
+    required DateTime dateFrom,
+    required DateTime dateTo,
+  }) async {
+    try {
+      User currentUser = await _authLocalDataProvider.currentUser();
+
+      final result = await _dataProvider.fetchDashboard(
+        outletId: currentUser.outletId,
+        dateFrom: dateFrom,
+        dateTo: dateTo,
+      );
+
+      if (result.hasError) {
+        return left(result.error!);
+      }
+
+      final auth = result.data!.toDomain();
+
+      return right(auth);
+    } catch (e, s) {
+      log('getDashboardError', name: _logName, error: e, stackTrace: s);
+      return left(const AnalyticFailure.unexpectedError());
+    }
+  }
 }

lib/injection.config.dart

@@ -11,6 +11,8 @@
 // ignore_for_file: no_leading_underscores_for_library_prefixes
 import 'package:apskel_owner_flutter/application/analytic/category_analytic_loader/category_analytic_loader_bloc.dart'
     as _i1038;
+import 'package:apskel_owner_flutter/application/analytic/dashboard_analytic_loader/dashboard_analytic_loader_bloc.dart'
+    as _i516;
 import 'package:apskel_owner_flutter/application/analytic/inventory_analytic_loader/inventory_analytic_loader_bloc.dart'
     as _i785;
 import 'package:apskel_owner_flutter/application/analytic/profit_loss_loader/profit_loss_loader_bloc.dart'
@@ -174,6 +176,9 @@ extension GetItInjectableX on _i174.GetIt {
     gh.factory<_i785.InventoryAnalyticLoaderBloc>(
       () => _i785.InventoryAnalyticLoaderBloc(gh<_i477.IAnalyticRepository>()),
     );
+    gh.factory<_i516.DashboardAnalyticLoaderBloc>(
+      () => _i516.DashboardAnalyticLoaderBloc(gh<_i477.IAnalyticRepository>()),
+    );
     gh.factory<_i775.LoginFormBloc>(
       () => _i775.LoginFormBloc(gh<_i49.IAuthRepository>()),
     );

lib/presentation/pages/report/report_page.dart

@@ -1,24 +1,35 @@
 import 'package:auto_route/auto_route.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:line_icons/line_icons.dart';
 import 'dart:math' as math;
 
+import '../../../application/analytic/dashboard_analytic_loader/dashboard_analytic_loader_bloc.dart';
 import '../../../common/theme/theme.dart';
+import '../../../injection.dart';
 import '../../components/appbar/appbar.dart';
 import '../../components/button/button.dart';
 import '../../components/spacer/spacer.dart';
+import 'widgets/payment_method.dart';
 import 'widgets/quick_stats.dart';
-import 'widgets/report_action.dart';
 import 'widgets/revenue_summary.dart';
 import 'widgets/sales.dart';
 import 'widgets/top_product.dart';
 
 @RoutePage()
-class ReportPage extends StatefulWidget {
+class ReportPage extends StatefulWidget implements AutoRouteWrapper {
   const ReportPage({super.key});
 
   @override
   State<ReportPage> createState() => _ReportPageState();
+
+  @override
+  Widget wrappedRoute(BuildContext context) => BlocProvider(
+    create: (context) =>
+        getIt<DashboardAnalyticLoaderBloc>()
+          ..add(DashboardAnalyticLoaderEvent.fetched()),
+    child: this,
+  );
 }
 
 class _ReportPageState extends State<ReportPage> with TickerProviderStateMixin {
@@ -78,7 +89,13 @@ class _ReportPageState extends State<ReportPage> with TickerProviderStateMixin {
   Widget build(BuildContext context) {
     return Scaffold(
       backgroundColor: AppColor.background,
-      body: CustomScrollView(
+      body:
+          BlocBuilder<
+            DashboardAnalyticLoaderBloc,
+            DashboardAnalyticLoaderState
+          >(
+            builder: (context, state) {
+              return CustomScrollView(
                 slivers: [
                   SliverAppBar(
                     expandedHeight: 120,
@@ -86,7 +103,10 @@ class _ReportPageState extends State<ReportPage> with TickerProviderStateMixin {
                     pinned: true,
                     backgroundColor: AppColor.primary,
                     centerTitle: false,
-            flexibleSpace: CustomAppBar(title: 'Laporan', isBack: false),
+                    flexibleSpace: CustomAppBar(
+                      title: 'Laporan',
+                      isBack: false,
+                    ),
                     actions: [
                       ActionIconButton(onTap: () {}, icon: LineIcons.download),
                       ActionIconButton(onTap: () {}, icon: LineIcons.filter),
@@ -106,17 +126,28 @@ class _ReportPageState extends State<ReportPage> with TickerProviderStateMixin {
                             child: Column(
                               children: [
                                 ReportRevenueSummary(
+                                  overview: state.dashboardAnalytic.overview,
                                   rotationAnimation: _rotationAnimation,
                                 ),
                                 const SpaceHeight(24),
-                        ReportQuickStats(),
+                                ReportQuickStats(
+                                  overview: state.dashboardAnalytic.overview,
+                                ),
                                 const SpaceHeight(24),
-                        ReportSales(),
+                                ReportSales(
+                                  salesData:
+                                      state.dashboardAnalytic.recentSales,
+                                ),
                                 const SpaceHeight(24),
-                        ReportTopProduct(),
+                                ReportPaymentMethod(
+                                  paymentMethods:
+                                      state.dashboardAnalytic.paymentMethods,
+                                ),
+                                const SpaceHeight(24),
+                                ReportTopProduct(
+                                  products: state.dashboardAnalytic.topProducts,
+                                ),
                                 const SpaceHeight(24),
-                        ReportAction(),
-                        const SpaceHeight(20),
                               ],
                             ),
                           ),
@@ -125,6 +156,8 @@ class _ReportPageState extends State<ReportPage> with TickerProviderStateMixin {
                     ),
                   ),
                 ],
+              );
+            },
           ),
     );
   }

lib/presentation/pages/report/widgets/payment_method.dart

@@ -0,0 +1,616 @@
+import 'package:flutter/material.dart';
+import '../../../../common/extension/extension.dart';
+import '../../../../common/theme/theme.dart';
+import '../../../../domain/analytic/analytic.dart';
+import '../../../components/widgets/empty_widget.dart';
+
+class ReportPaymentMethod extends StatelessWidget {
+  final List<DashboardPaymentMethod> paymentMethods;
+
+  const ReportPaymentMethod({super.key, required this.paymentMethods});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: BoxDecoration(
+        color: AppColor.white,
+        borderRadius: BorderRadius.circular(20),
+        boxShadow: [
+          BoxShadow(
+            color: Colors.black.withOpacity(0.06),
+            blurRadius: 20,
+            offset: const Offset(0, 4),
+            spreadRadius: -4,
+          ),
+        ],
+      ),
+      child: Padding(
+        padding: const EdgeInsets.all(24),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            // Header
+            Row(
+              children: [
+                Container(
+                  padding: const EdgeInsets.all(12),
+                  decoration: BoxDecoration(
+                    gradient: LinearGradient(
+                      colors: AppColor.primaryGradient,
+                      begin: Alignment.topLeft,
+                      end: Alignment.bottomRight,
+                    ),
+                    borderRadius: BorderRadius.circular(16),
+                    boxShadow: [
+                      BoxShadow(
+                        color: AppColor.primary.withOpacity(0.3),
+                        blurRadius: 12,
+                        offset: const Offset(0, 4),
+                      ),
+                    ],
+                  ),
+                  child: Icon(Icons.payment, color: AppColor.white, size: 24),
+                ),
+                const SizedBox(width: 16),
+                Expanded(
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Text(
+                        'Payment Methods',
+                        style: AppStyle.xl.copyWith(
+                          fontWeight: FontWeight.bold,
+                          color: AppColor.textPrimary,
+                        ),
+                      ),
+                      const SizedBox(height: 4),
+                      Text(
+                        'Revenue breakdown by payment method',
+                        style: AppStyle.sm.copyWith(
+                          color: AppColor.textSecondary,
+                        ),
+                      ),
+                    ],
+                  ),
+                ),
+              ],
+            ),
+
+            const SizedBox(height: 24),
+
+            // Payment Method List
+            if (paymentMethods.isEmpty)
+              _buildEmptyState()
+            else
+              ListView.separated(
+                shrinkWrap: true,
+                physics: const NeverScrollableScrollPhysics(),
+                itemCount: paymentMethods.length,
+                padding: EdgeInsets.zero,
+                separatorBuilder: (context, index) =>
+                    const SizedBox(height: 12),
+                itemBuilder: (context, index) {
+                  final method = paymentMethods[index];
+                  return TweenAnimationBuilder<double>(
+                    tween: Tween<double>(begin: 0, end: 1),
+                    duration: Duration(milliseconds: 600 + (index * 150)),
+                    curve: Curves.easeOutCubic,
+                    builder: (context, value, child) {
+                      return Transform.translate(
+                        offset: Offset(30 * (1 - value), 0),
+                        child: Opacity(
+                          opacity: value,
+                          child: _buildPaymentMethodTile(
+                            context,
+                            method,
+                            index,
+                          ),
+                        ),
+                      );
+                    },
+                  );
+                },
+              ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _buildPaymentMethodTile(
+    BuildContext context,
+    DashboardPaymentMethod method,
+    int index,
+  ) {
+    final screenWidth = MediaQuery.of(context).size.width;
+    final isCompact = screenWidth < 400; // For smaller screens
+
+    return Container(
+      decoration: BoxDecoration(
+        color: AppColor.white,
+        borderRadius: BorderRadius.circular(16),
+        border: Border.all(
+          color: _getPaymentMethodColor(
+            method.paymentMethodType,
+          ).withOpacity(0.1),
+          width: 1.5,
+        ),
+        boxShadow: [
+          BoxShadow(
+            color: _getPaymentMethodColor(
+              method.paymentMethodType,
+            ).withOpacity(0.08),
+            blurRadius: 12,
+            offset: const Offset(0, 4),
+            spreadRadius: -2,
+          ),
+          BoxShadow(
+            color: Colors.black.withOpacity(0.03),
+            blurRadius: 6,
+            offset: const Offset(0, 2),
+          ),
+        ],
+      ),
+      child: ClipRRect(
+        borderRadius: BorderRadius.circular(16),
+        child: Stack(
+          children: [
+            // Subtle background gradient
+            Positioned.fill(
+              child: Container(
+                decoration: BoxDecoration(
+                  gradient: LinearGradient(
+                    colors: [
+                      _getPaymentMethodColor(
+                        method.paymentMethodType,
+                      ).withOpacity(0.03),
+                      _getPaymentMethodColor(
+                        method.paymentMethodType,
+                      ).withOpacity(0.01),
+                    ],
+                    begin: Alignment.topLeft,
+                    end: Alignment.bottomRight,
+                  ),
+                ),
+              ),
+            ),
+
+            // Main content
+            Padding(
+              padding: const EdgeInsets.all(20),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  // Header section with improved responsive layout
+                  if (isCompact)
+                    _buildCompactHeader(method)
+                  else
+                    _buildStandardHeader(context, method),
+
+                  const SizedBox(height: 16),
+
+                  // Stats row with better spacing
+                  _buildStatsSection(method),
+
+                  const SizedBox(height: 16),
+
+                  // Enhanced progress bar section
+                  _buildProgressSection(method, index),
+                ],
+              ),
+            ),
+
+            // Accent line on the left
+            Positioned(
+              left: 0,
+              top: 0,
+              bottom: 0,
+              child: Container(
+                width: 4,
+                decoration: BoxDecoration(
+                  color: _getPaymentMethodColor(method.paymentMethodType),
+                  borderRadius: const BorderRadius.only(
+                    topLeft: Radius.circular(16),
+                    bottomLeft: Radius.circular(16),
+                  ),
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _buildStandardHeader(
+    BuildContext context,
+    DashboardPaymentMethod method,
+  ) {
+    return Row(
+      children: [
+        // Enhanced icon container
+        Container(
+          width: 56,
+          height: 56,
+          decoration: BoxDecoration(
+            gradient: LinearGradient(
+              colors: [
+                _getPaymentMethodColor(method.paymentMethodType),
+                _getPaymentMethodColor(
+                  method.paymentMethodType,
+                ).withOpacity(0.8),
+              ],
+              begin: Alignment.topLeft,
+              end: Alignment.bottomRight,
+            ),
+            borderRadius: BorderRadius.circular(16),
+            boxShadow: [
+              BoxShadow(
+                color: _getPaymentMethodColor(
+                  method.paymentMethodType,
+                ).withOpacity(0.3),
+                blurRadius: 8,
+                offset: const Offset(0, 4),
+              ),
+            ],
+          ),
+          child: Icon(
+            _getPaymentMethodIcon(method.paymentMethodType),
+            color: AppColor.white,
+            size: 28,
+          ),
+        ),
+
+        const SizedBox(width: 16),
+
+        // Payment method info - improved text handling
+        Expanded(
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Text(
+                method.paymentMethodName,
+                style: AppStyle.lg.copyWith(
+                  fontWeight: FontWeight.bold,
+                  color: AppColor.textPrimary,
+                ),
+                maxLines: 1,
+                overflow: TextOverflow.ellipsis,
+              ),
+              const SizedBox(height: 6),
+              Container(
+                padding: const EdgeInsets.symmetric(
+                  horizontal: 10,
+                  vertical: 5,
+                ),
+                decoration: BoxDecoration(
+                  color: _getPaymentMethodColor(
+                    method.paymentMethodType,
+                  ).withOpacity(0.1),
+                  borderRadius: BorderRadius.circular(12),
+                  border: Border.all(
+                    color: _getPaymentMethodColor(
+                      method.paymentMethodType,
+                    ).withOpacity(0.2),
+                    width: 1,
+                  ),
+                ),
+                child: Text(
+                  method.paymentMethodType.toUpperCase(),
+                  style: AppStyle.xs.copyWith(
+                    color: _getPaymentMethodColor(method.paymentMethodType),
+                    fontWeight: FontWeight.bold,
+                    letterSpacing: 0.8,
+                  ),
+                ),
+              ),
+            ],
+          ),
+        ),
+
+        const SizedBox(width: 12),
+
+        // Percentage badge
+        Container(
+          padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
+          decoration: BoxDecoration(
+            color: _getPaymentMethodColor(method.paymentMethodType),
+            borderRadius: BorderRadius.circular(20),
+            boxShadow: [
+              BoxShadow(
+                color: _getPaymentMethodColor(
+                  method.paymentMethodType,
+                ).withOpacity(0.3),
+                blurRadius: 6,
+                offset: const Offset(0, 3),
+              ),
+            ],
+          ),
+          child: Text(
+            '${method.percentage.toStringAsFixed(1)}%',
+            style: AppStyle.sm.copyWith(
+              color: AppColor.white,
+              fontWeight: FontWeight.bold,
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+
+  Widget _buildCompactHeader(DashboardPaymentMethod method) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Row(
+          children: [
+            Container(
+              width: 48,
+              height: 48,
+              decoration: BoxDecoration(
+                gradient: LinearGradient(
+                  colors: [
+                    _getPaymentMethodColor(method.paymentMethodType),
+                    _getPaymentMethodColor(
+                      method.paymentMethodType,
+                    ).withOpacity(0.8),
+                  ],
+                ),
+                borderRadius: BorderRadius.circular(14),
+              ),
+              child: Icon(
+                _getPaymentMethodIcon(method.paymentMethodType),
+                color: AppColor.white,
+                size: 24,
+              ),
+            ),
+            const SizedBox(width: 12),
+            Expanded(
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text(
+                    method.paymentMethodName,
+                    style: AppStyle.md.copyWith(
+                      fontWeight: FontWeight.bold,
+                      color: AppColor.textPrimary,
+                    ),
+                    maxLines: 1,
+                    overflow: TextOverflow.ellipsis,
+                  ),
+                  const SizedBox(height: 4),
+                  Text(
+                    method.paymentMethodType.toUpperCase(),
+                    style: AppStyle.xs.copyWith(
+                      color: _getPaymentMethodColor(method.paymentMethodType),
+                      fontWeight: FontWeight.bold,
+                      letterSpacing: 0.5,
+                    ),
+                  ),
+                ],
+              ),
+            ),
+            Container(
+              padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
+              decoration: BoxDecoration(
+                color: _getPaymentMethodColor(method.paymentMethodType),
+                borderRadius: BorderRadius.circular(16),
+              ),
+              child: Text(
+                '${method.percentage.toStringAsFixed(1)}%',
+                style: AppStyle.xs.copyWith(
+                  color: AppColor.white,
+                  fontWeight: FontWeight.bold,
+                ),
+              ),
+            ),
+          ],
+        ),
+      ],
+    );
+  }
+
+  Widget _buildStatsSection(DashboardPaymentMethod method) {
+    return Container(
+      padding: const EdgeInsets.all(16),
+      decoration: BoxDecoration(
+        color: AppColor.background.withOpacity(0.5),
+        borderRadius: BorderRadius.circular(12),
+        border: Border.all(color: AppColor.border.withOpacity(0.2), width: 1),
+      ),
+      child: IntrinsicHeight(
+        child: Row(
+          children: [
+            Expanded(
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text(
+                    'Total Revenue',
+                    style: AppStyle.xs.copyWith(
+                      color: AppColor.textSecondary,
+                      fontWeight: FontWeight.w500,
+                      letterSpacing: 0.5,
+                    ),
+                  ),
+                  const SizedBox(height: 6),
+                  Text(
+                    method.totalAmount.currencyFormatRp,
+                    style: AppStyle.lg.copyWith(
+                      fontWeight: FontWeight.bold,
+                      color: AppColor.textPrimary,
+                    ),
+                    maxLines: 1,
+                    overflow: TextOverflow.ellipsis,
+                  ),
+                ],
+              ),
+            ),
+            Container(
+              width: 1,
+              margin: const EdgeInsets.symmetric(horizontal: 16),
+              decoration: BoxDecoration(
+                color: AppColor.border.withOpacity(0.3),
+              ),
+            ),
+            Column(
+              crossAxisAlignment: CrossAxisAlignment.end,
+              children: [
+                Text(
+                  'Orders',
+                  style: AppStyle.xs.copyWith(
+                    color: AppColor.textSecondary,
+                    fontWeight: FontWeight.w500,
+                    letterSpacing: 0.5,
+                  ),
+                ),
+                const SizedBox(height: 6),
+                Text(
+                  '${method.orderCount}',
+                  style: AppStyle.lg.copyWith(
+                    fontWeight: FontWeight.bold,
+                    color: _getPaymentMethodColor(method.paymentMethodType),
+                  ),
+                ),
+              ],
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _buildProgressSection(DashboardPaymentMethod method, int index) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            Text(
+              'Revenue Share',
+              style: AppStyle.sm.copyWith(
+                color: AppColor.textSecondary,
+                fontWeight: FontWeight.w600,
+              ),
+            ),
+            Container(
+              padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
+              decoration: BoxDecoration(
+                color: _getPaymentMethodColor(
+                  method.paymentMethodType,
+                ).withOpacity(0.1),
+                borderRadius: BorderRadius.circular(8),
+              ),
+              child: Text(
+                '${method.percentage.toStringAsFixed(1)}%',
+                style: AppStyle.sm.copyWith(
+                  color: _getPaymentMethodColor(method.paymentMethodType),
+                  fontWeight: FontWeight.bold,
+                ),
+              ),
+            ),
+          ],
+        ),
+        const SizedBox(height: 12),
+        TweenAnimationBuilder<double>(
+          tween: Tween<double>(begin: 0, end: method.percentage / 100),
+          duration: Duration(milliseconds: 1200 + (index * 200)),
+          curve: Curves.easeOutCubic,
+          builder: (context, value, child) {
+            return Container(
+              height: 8,
+              decoration: BoxDecoration(
+                borderRadius: BorderRadius.circular(4),
+                color: AppColor.border.withOpacity(0.3),
+              ),
+              child: Stack(
+                children: [
+                  FractionallySizedBox(
+                    widthFactor: value,
+                    child: Container(
+                      decoration: BoxDecoration(
+                        gradient: LinearGradient(
+                          colors: [
+                            _getPaymentMethodColor(method.paymentMethodType),
+                            _getPaymentMethodColor(
+                              method.paymentMethodType,
+                            ).withOpacity(0.8),
+                          ],
+                        ),
+                        borderRadius: BorderRadius.circular(4),
+                        boxShadow: [
+                          BoxShadow(
+                            color: _getPaymentMethodColor(
+                              method.paymentMethodType,
+                            ).withOpacity(0.3),
+                            blurRadius: 4,
+                            offset: const Offset(0, 1),
+                          ),
+                        ],
+                      ),
+                    ),
+                  ),
+                ],
+              ),
+            );
+          },
+        ),
+      ],
+    );
+  }
+
+  Widget _buildEmptyState() {
+    return EmptyWidget(
+      title: 'No Payment Methods',
+      message:
+          'Payment method data will appear here once transactions are made',
+    );
+  }
+
+  Color _getPaymentMethodColor(String type) {
+    switch (type.toLowerCase()) {
+      case 'cash':
+        return AppColor.success;
+      case 'card':
+      case 'credit_card':
+      case 'debit_card':
+        return AppColor.info;
+      case 'bank_transfer':
+      case 'transfer':
+        return AppColor.primary;
+      case 'ewallet':
+      case 'e_wallet':
+      case 'digital_wallet':
+        return AppColor.warning;
+      case 'qr_code':
+      case 'qris':
+        return const Color(0xFF9C27B0); // Purple
+      default:
+        return AppColor.textSecondary;
+    }
+  }
+
+  IconData _getPaymentMethodIcon(String type) {
+    switch (type.toLowerCase()) {
+      case 'cash':
+        return Icons.payments;
+      case 'card':
+      case 'credit_card':
+      case 'debit_card':
+        return Icons.credit_card;
+      case 'bank_transfer':
+      case 'transfer':
+        return Icons.account_balance;
+      case 'ewallet':
+      case 'e_wallet':
+      case 'digital_wallet':
+        return Icons.account_balance_wallet;
+      case 'qr_code':
+      case 'qris':
+        return Icons.qr_code;
+      default:
+        return Icons.payment;
+    }
+  }
+}

lib/presentation/pages/report/widgets/quick_stats.dart

@@ -1,14 +1,20 @@
 import 'package:flutter/material.dart';
 
+import '../../../../common/extension/extension.dart';
 import '../../../../common/theme/theme.dart';
+import '../../../../domain/analytic/analytic.dart';
 import 'stat_tile.dart';
 
 class ReportQuickStats extends StatelessWidget {
-  const ReportQuickStats({super.key});
+  final DashboardOverview overview;
+
+  const ReportQuickStats({super.key, required this.overview});
 
   @override
   Widget build(BuildContext context) {
-    return Row(
+    return Column(
+      children: [
+        Row(
           children: [
             Expanded(
               child: TweenAnimationBuilder<double>(
@@ -18,12 +24,11 @@ class ReportQuickStats extends StatelessWidget {
                   return Transform.scale(
                     scale: value,
                     child: ReportStatTile(
-                  title: 'Total Transaksi',
-                  value: '245',
+                      title: 'Total Orders',
+                      value: overview.totalOrders.toString(),
                       icon: Icons.receipt_long,
                       color: AppColor.info,
-                  change: '+8.2%',
-                  animatedValue: 245 * value,
+                      animatedValue: overview.totalOrders * value,
                     ),
                   );
                 },
@@ -38,18 +43,69 @@ class ReportQuickStats extends StatelessWidget {
                   return Transform.scale(
                     scale: value,
                     child: ReportStatTile(
-                  title: 'Rata-rata',
-                  value: 'Rp 63.061',
+                      title: 'Average Order',
+                      value: overview.averageOrderValue
+                          .round()
+                          .currencyFormatRp,
                       icon: Icons.trending_up,
                       color: AppColor.warning,
-                  change: '+5.1%',
-                  animatedValue: 63061 * value,
+                      animatedValue: overview.averageOrderValue * value,
                     ),
                   );
                 },
               ),
             ),
           ],
+        ),
+
+        const SizedBox(height: 16),
+
+        Row(
+          children: [
+            Expanded(
+              child: TweenAnimationBuilder<double>(
+                tween: Tween<double>(begin: 0, end: 1),
+                duration: const Duration(milliseconds: 1200),
+                builder: (context, value, child) {
+                  return Transform.scale(
+                    scale: value,
+                    child: ReportStatTile(
+                      title: 'Customers',
+                      value: overview.totalCustomers.toString(),
+                      icon: Icons.people,
+                      color: AppColor.success,
+                      animatedValue: overview.totalCustomers * value,
+                    ),
+                  );
+                },
+              ),
+            ),
+            const SizedBox(width: 16),
+            Expanded(
+              child: TweenAnimationBuilder<double>(
+                tween: Tween<double>(begin: 0, end: 1),
+                duration: const Duration(milliseconds: 1400),
+                builder: (context, value, child) {
+                  return Transform.scale(
+                    scale: value,
+                    child: ReportStatTile(
+                      title: 'Void + Refund',
+                      value: (overview.voidedOrders + overview.refundedOrders)
+                          .toString(),
+
+                      icon: Icons.cancel,
+                      color: AppColor.error,
+                      animatedValue:
+                          (overview.voidedOrders + overview.refundedOrders) *
+                          value,
+                    ),
+                  );
+                },
+              ),
+            ),
+          ],
+        ),
+      ],
     );
   }
 }

lib/presentation/pages/report/widgets/report_action.dart

@@ -1,136 +0,0 @@
-import 'package:flutter/material.dart';
-
-import '../../../../common/theme/theme.dart';
-import '../../../components/spacer/spacer.dart';
-
-class ReportAction extends StatefulWidget {
-  const ReportAction({super.key});
-
-  @override
-  State<ReportAction> createState() => _ReportActionState();
-}
-
-class _ReportActionState extends State<ReportAction> {
-  final actions = [
-    {
-      'title': 'Laporan Detail Penjualan',
-      'subtitle': 'Analisis mendalam transaksi harian',
-      'icon': Icons.assignment,
-      'color': AppColor.primary,
-      'gradient': [AppColor.primary, AppColor.primaryLight],
-    },
-    {
-      'title': 'Monitor Stok Produk',
-      'subtitle': 'Tracking inventory real-time',
-      'icon': Icons.inventory_2,
-      'color': AppColor.info,
-      'gradient': [AppColor.info, const Color(0xFF64B5F6)],
-    },
-    {
-      'title': 'Analisis Keuangan',
-      'subtitle': 'Profit, loss & cash flow analysis',
-      'icon': Icons.account_balance_wallet,
-      'color': AppColor.success,
-      'gradient': [AppColor.success, AppColor.secondaryLight],
-    },
-  ];
-
-  @override
-  Widget build(BuildContext context) {
-    return Column(
-      children: actions.map((action) {
-        return Container(
-          margin: const EdgeInsets.only(bottom: 16),
-          child: Material(
-            color: Colors.transparent,
-            child: InkWell(
-              onTap: () {},
-              borderRadius: BorderRadius.circular(20),
-              child: Container(
-                padding: const EdgeInsets.all(20),
-                decoration: BoxDecoration(
-                  gradient: LinearGradient(
-                    colors: [
-                      (action['color'] as Color).withOpacity(0.1),
-                      (action['color'] as Color).withOpacity(0.05),
-                    ],
-                    begin: Alignment.topLeft,
-                    end: Alignment.bottomRight,
-                  ),
-                  borderRadius: BorderRadius.circular(20),
-                  border: Border.all(
-                    color: (action['color'] as Color).withOpacity(0.3),
-                    width: 1.5,
-                  ),
-                ),
-                child: Row(
-                  children: [
-                    Container(
-                      padding: const EdgeInsets.all(16),
-                      decoration: BoxDecoration(
-                        gradient: LinearGradient(
-                          colors: action['gradient'] as List<Color>,
-                          begin: Alignment.topLeft,
-                          end: Alignment.bottomRight,
-                        ),
-                        borderRadius: BorderRadius.circular(16),
-                        boxShadow: [
-                          BoxShadow(
-                            color: (action['color'] as Color).withOpacity(0.3),
-                            blurRadius: 10,
-                            offset: const Offset(0, 4),
-                          ),
-                        ],
-                      ),
-                      child: Icon(
-                        action['icon'] as IconData,
-                        color: AppColor.white,
-                        size: 28,
-                      ),
-                    ),
-                    const SizedBox(width: 20),
-                    Expanded(
-                      child: Column(
-                        crossAxisAlignment: CrossAxisAlignment.start,
-                        children: [
-                          Text(
-                            action['title'] as String,
-                            style: AppStyle.lg.copyWith(
-                              color: AppColor.textPrimary,
-                              fontSize: 16,
-                              fontWeight: FontWeight.w600,
-                            ),
-                          ),
-                          const SpaceHeight(4),
-                          Text(
-                            action['subtitle'] as String,
-                            style: AppStyle.sm.copyWith(
-                              color: AppColor.textSecondary,
-                              fontSize: 13,
-                            ),
-                          ),
-                        ],
-                      ),
-                    ),
-                    Container(
-                      padding: const EdgeInsets.all(8),
-                      decoration: BoxDecoration(
-                        color: (action['color'] as Color).withOpacity(0.1),
-                        borderRadius: BorderRadius.circular(10),
-                      ),
-                      child: Icon(
-                        Icons.arrow_forward_ios,
-                        color: action['color'] as Color,
-                        size: 16,
-                      ),
-                    ),
-                  ],
-                ),
-              ),
-            ),
-          ),
-        );
-      }).toList(),
-    );
-  }
-}

lib/presentation/pages/report/widgets/revenue_summary.dart

@@ -1,11 +1,18 @@
 import 'package:flutter/material.dart';
 
+import '../../../../common/extension/extension.dart';
 import '../../../../common/theme/theme.dart';
+import '../../../../domain/analytic/analytic.dart';
 import '../../../components/spacer/spacer.dart';
 
 class ReportRevenueSummary extends StatelessWidget {
+  final DashboardOverview overview;
   final Animation<double> rotationAnimation;
-  const ReportRevenueSummary({super.key, required this.rotationAnimation});
+  const ReportRevenueSummary({
+    super.key,
+    required this.rotationAnimation,
+    required this.overview,
+  });
 
   @override
   Widget build(BuildContext context) {
@@ -106,51 +113,13 @@ class ReportRevenueSummary extends StatelessWidget {
                 ),
                 const Spacer(),
                 Text(
-                  'Rp 15.450.000',
+                  overview.totalSales.currencyFormatRp,
                   style: AppStyle.h1.copyWith(
                     color: AppColor.textWhite,
                     fontWeight: FontWeight.bold,
                     letterSpacing: -1,
                   ),
                 ),
-                const SpaceHeight(8),
-                Row(
-                  children: [
-                    Container(
-                      padding: const EdgeInsets.symmetric(
-                        horizontal: 12,
-                        vertical: 6,
-                      ),
-                      decoration: BoxDecoration(
-                        color: AppColor.success.withOpacity(0.9),
-                        borderRadius: BorderRadius.circular(20),
-                      ),
-                      child: Row(
-                        mainAxisSize: MainAxisSize.min,
-                        children: [
-                          Icon(
-                            Icons.trending_up,
-                            color: AppColor.textWhite,
-                            size: 16,
-                          ),
-                          SpaceWidth(4),
-                          Text(
-                            '+12.5%',
-                            style: AppStyle.sm.copyWith(
-                              color: AppColor.textWhite,
-                              fontWeight: FontWeight.w700,
-                            ),
-                          ),
-                        ],
-                      ),
-                    ),
-                    const SpaceWidth(12),
-                    Text(
-                      'dari periode sebelumnya',
-                      style: AppStyle.sm.copyWith(color: AppColor.textWhite),
-                    ),
-                  ],
-                ),
               ],
             ),
           ),

lib/presentation/pages/report/widgets/sales.dart

@@ -1,11 +1,15 @@
 import 'package:fl_chart/fl_chart.dart';
 import 'package:flutter/material.dart';
-
+import '../../../../common/extension/extension.dart';
 import '../../../../common/theme/theme.dart';
+import '../../../../domain/analytic/analytic.dart';
 import '../../../components/spacer/spacer.dart';
+import '../../../components/widgets/empty_widget.dart';
 
 class ReportSales extends StatelessWidget {
-  const ReportSales({super.key});
+  final List<DashboardRecentSale> salesData;
+
+  const ReportSales({super.key, required this.salesData});
 
   @override
   Widget build(BuildContext context) {
@@ -25,6 +29,7 @@ class ReportSales extends StatelessWidget {
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
+          // Header Section
           Row(
             mainAxisAlignment: MainAxisAlignment.spaceBetween,
             children: [
@@ -32,16 +37,17 @@ class ReportSales extends StatelessWidget {
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: [
                   Text(
-                    'Grafik Penjualan',
+                    'Sales Chart',
                     style: AppStyle.xxl.copyWith(
                       color: AppColor.textPrimary,
-
                       fontWeight: FontWeight.bold,
                     ),
                   ),
                   const SpaceHeight(4),
                   Text(
-                    '7 hari terakhir',
+                    salesData.isEmpty
+                        ? 'No data available'
+                        : '${salesData.length} days overview',
                     style: AppStyle.md.copyWith(color: AppColor.textSecondary),
                   ),
                 ],
@@ -60,11 +66,20 @@ class ReportSales extends StatelessWidget {
               ),
             ],
           ),
+
           const SpaceHeight(20),
 
+          // Sales Summary Cards
+          if (salesData.isNotEmpty) ...[
+            _buildSalesSummary(),
+            const SpaceHeight(20),
+          ],
+
           // Chart Container
-          Container(
-            height: 280,
+          salesData.isEmpty
+              ? _buildEmptyChart()
+              : Container(
+                  height: 300,
                   padding: const EdgeInsets.all(16),
                   decoration: BoxDecoration(
                     gradient: LinearGradient(
@@ -81,13 +96,148 @@ class ReportSales extends StatelessWidget {
                       width: 2,
                     ),
                   ),
-            child: LineChart(
+                  child: _buildSalesChart(),
+                ),
+
+          const SpaceHeight(16),
+
+          // Legend
+          if (salesData.isNotEmpty)
+            Row(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [_buildLegendItem('Sales Data', AppColor.primary)],
+            ),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildSalesSummary() {
+    final totalSales = salesData.fold<int>(0, (sum, item) => sum + item.sales);
+    final totalOrders = salesData.fold<int>(
+      0,
+      (sum, item) => sum + item.orders,
+    );
+    final totalItems = salesData.fold<int>(0, (sum, item) => sum + item.items);
+    final totalNetSales = salesData.fold<int>(
+      0,
+      (sum, item) => sum + item.netSales,
+    );
+
+    return Container(
+      padding: const EdgeInsets.all(16),
+      decoration: BoxDecoration(
+        color: AppColor.backgroundLight,
+        borderRadius: BorderRadius.circular(16),
+        border: Border.all(color: AppColor.border.withOpacity(0.3), width: 1),
+      ),
+      child: Column(
+        children: [
+          Row(
+            children: [
+              Expanded(
+                child: _buildSummaryItem(
+                  'Total Sales',
+                  totalSales.currencyFormatRp,
+                  Icons.attach_money,
+                  AppColor.success,
+                ),
+              ),
+              Container(
+                width: 1,
+                height: 40,
+                color: AppColor.border.withOpacity(0.3),
+                margin: const EdgeInsets.symmetric(horizontal: 16),
+              ),
+              Expanded(
+                child: _buildSummaryItem(
+                  'Net Sales',
+                  totalNetSales.currencyFormatRp,
+                  Icons.trending_up,
+                  AppColor.primary,
+                ),
+              ),
+            ],
+          ),
+          const SpaceHeight(16),
+          Row(
+            children: [
+              Expanded(
+                child: _buildSummaryItem(
+                  'Total Orders',
+                  totalOrders.toString(),
+                  Icons.shopping_cart,
+                  AppColor.info,
+                ),
+              ),
+              Container(
+                width: 1,
+                height: 40,
+                color: AppColor.border.withOpacity(0.3),
+                margin: const EdgeInsets.symmetric(horizontal: 16),
+              ),
+              Expanded(
+                child: _buildSummaryItem(
+                  'Total Items',
+                  totalItems.toString(),
+                  Icons.inventory,
+                  AppColor.warning,
+                ),
+              ),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildSummaryItem(
+    String label,
+    String value,
+    IconData icon,
+    Color color,
+  ) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Row(
+          children: [
+            Icon(icon, size: 16, color: color),
+            const SpaceWidth(6),
+            Text(
+              label,
+              style: AppStyle.xs.copyWith(
+                color: AppColor.textSecondary,
+                fontWeight: FontWeight.w500,
+              ),
+            ),
+          ],
+        ),
+        const SpaceHeight(6),
+        Text(
+          value,
+          style: AppStyle.md.copyWith(
+            color: color,
+            fontWeight: FontWeight.bold,
+          ),
+          maxLines: 1,
+          overflow: TextOverflow.ellipsis,
+        ),
+      ],
+    );
+  }
+
+  Widget _buildSalesChart() {
+    final maxValue = _getMaxValue();
+    final spots = _generateSpots(salesData);
+
+    return LineChart(
       LineChartData(
         gridData: FlGridData(
           show: true,
           drawHorizontalLine: true,
           drawVerticalLine: false,
-                  horizontalInterval: 500000,
+          horizontalInterval: maxValue / 5,
           getDrawingHorizontalLine: (value) {
             return FlLine(
               color: AppColor.border.withOpacity(0.3),
@@ -100,11 +250,11 @@ class ReportSales extends StatelessWidget {
           leftTitles: AxisTitles(
             sideTitles: SideTitles(
               showTitles: true,
-                      reservedSize: 60,
+              reservedSize: 70,
               getTitlesWidget: (value, meta) {
                 return Text(
-                          '${(value / 1000000).toStringAsFixed(1)}M',
-                          style: AppStyle.sm.copyWith(
+                  _formatCurrency(value),
+                  style: AppStyle.xs.copyWith(
                     color: AppColor.textSecondary,
                     fontWeight: FontWeight.w500,
                   ),
@@ -117,21 +267,15 @@ class ReportSales extends StatelessWidget {
               showTitles: true,
               reservedSize: 32,
               getTitlesWidget: (value, meta) {
-                        const days = [
-                          'Sen',
-                          'Sel',
-                          'Rab',
-                          'Kam',
-                          'Jum',
-                          'Sab',
-                          'Min',
-                        ];
-                        if (value.toInt() >= 0 && value.toInt() < days.length) {
+                final index = value.toInt();
+                if (index >= 0 && index < salesData.length) {
+                  final date = DateTime.parse(salesData[index].date);
+                  final dayName = _getDayName(date.weekday);
                   return Padding(
                     padding: const EdgeInsets.only(top: 8),
                     child: Text(
-                              days[value.toInt()],
-                              style: AppStyle.sm.copyWith(
+                      dayName,
+                      style: AppStyle.xs.copyWith(
                         color: AppColor.textSecondary,
                         fontWeight: FontWeight.w500,
                       ),
@@ -142,30 +286,18 @@ class ReportSales extends StatelessWidget {
               },
             ),
           ),
-                  rightTitles: AxisTitles(
-                    sideTitles: SideTitles(showTitles: false),
-                  ),
-                  topTitles: AxisTitles(
-                    sideTitles: SideTitles(showTitles: false),
-                  ),
+          rightTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
+          topTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
         ),
         borderData: FlBorderData(show: false),
         minX: 0,
-                maxX: 6,
+        maxX: (salesData.length - 1).toDouble(),
         minY: 0,
-                maxY: 3000000,
+        maxY: maxValue,
         lineBarsData: [
           // Main sales line
           LineChartBarData(
-                    spots: [
-                      const FlSpot(0, 1800000), // Senin
-                      const FlSpot(1, 2200000), // Selasa
-                      const FlSpot(2, 1900000), // Rabu
-                      const FlSpot(3, 2600000), // Kamis
-                      const FlSpot(4, 2300000), // Jumat
-                      const FlSpot(5, 2800000), // Sabtu
-                      const FlSpot(6, 2500000), // Minggu
-                    ],
+            spots: spots,
             isCurved: true,
             curveSmoothness: 0.35,
             gradient: LinearGradient(
@@ -199,56 +331,23 @@ class ReportSales extends StatelessWidget {
               },
             ),
           ),
-                  // Secondary line for comparison
-                  LineChartBarData(
-                    spots: [
-                      const FlSpot(0, 1500000),
-                      const FlSpot(1, 1800000),
-                      const FlSpot(2, 1600000),
-                      const FlSpot(3, 2100000),
-                      const FlSpot(4, 1900000),
-                      const FlSpot(5, 2300000),
-                      const FlSpot(6, 2100000),
-                    ],
-                    isCurved: true,
-                    curveSmoothness: 0.35,
-                    color: AppColor.success.withOpacity(0.7),
-                    barWidth: 3,
-                    isStrokeCapRound: true,
-                    dashArray: [8, 4],
-                    belowBarData: BarAreaData(show: false),
-                    dotData: FlDotData(
-                      show: true,
-                      getDotPainter: (spot, percent, barData, index) {
-                        return FlDotCirclePainter(
-                          radius: 4,
-                          color: AppColor.success,
-                          strokeWidth: 2,
-                          strokeColor: AppColor.surface,
-                        );
-                      },
-                    ),
-                  ),
         ],
         lineTouchData: LineTouchData(
           enabled: true,
           touchTooltipData: LineTouchTooltipData(
             tooltipPadding: const EdgeInsets.all(12),
             getTooltipItems: (List<LineBarSpot> touchedBarSpots) {
-                      return touchedBarSpots.map((barSpot) {
-                        final flSpot = barSpot;
-                        const days = [
-                          'Senin',
-                          'Selasa',
-                          'Rabu',
-                          'Kamis',
-                          'Jumat',
-                          'Sabtu',
-                          'Minggu',
-                        ];
+              return touchedBarSpots
+                  .map((barSpot) {
+                    final index = barSpot.x.toInt();
+
+                    if (index >= 0 && index < salesData.length) {
+                      final sale = salesData[index];
+                      final date = DateTime.parse(sale.date);
+                      final dayName = _getDayName(date.weekday);
 
                       return LineTooltipItem(
-                          '${days[flSpot.x.toInt()]}\n',
+                        '$dayName\n',
                         const TextStyle(
                           color: AppColor.textWhite,
                           fontWeight: FontWeight.bold,
@@ -256,16 +355,34 @@ class ReportSales extends StatelessWidget {
                         ),
                         children: [
                           TextSpan(
-                              text:
-                                  'Rp ${(flSpot.y / 1000000).toStringAsFixed(1)}M',
+                            text: 'Sales: ${sale.sales.currencyFormatRp}\n',
                             style: AppStyle.sm.copyWith(
                               color: AppColor.textWhite,
                               fontWeight: FontWeight.w500,
                             ),
                           ),
+                          TextSpan(
+                            text: 'Orders: ${sale.orders}\n',
+                            style: AppStyle.sm.copyWith(
+                              color: AppColor.textWhite,
+                              fontWeight: FontWeight.w400,
+                            ),
+                          ),
+                          TextSpan(
+                            text: 'Net: ${sale.netSales.currencyFormatRp}',
+                            style: AppStyle.sm.copyWith(
+                              color: AppColor.textWhite,
+                              fontWeight: FontWeight.w400,
+                            ),
+                          ),
                         ],
                       );
-                      }).toList();
+                    }
+                    return null;
+                  })
+                  .where((item) => item != null)
+                  .cast<LineTooltipItem>()
+                  .toList();
             },
           ),
           touchCallback:
@@ -275,25 +392,50 @@ class ReportSales extends StatelessWidget {
           handleBuiltInTouches: true,
         ),
       ),
-            ),
-          ),
-
-          const SpaceHeight(16),
-
-          // Legend
-          Row(
-            mainAxisAlignment: MainAxisAlignment.center,
-            children: [
-              _buildLegendItem('Minggu Ini', AppColor.primary),
-              const SpaceWidth(24),
-              _buildLegendItem('Minggu Lalu', AppColor.success),
-            ],
-          ),
-        ],
-      ),
     );
   }
 
+  Widget _buildEmptyChart() {
+    return EmptyWidget(
+      title: 'No Sales Data',
+      message: 'Sales data will appear here once transactions are recorded',
+      emptyIcon: Icons.show_chart,
+    );
+  }
+
+  List<FlSpot> _generateSpots(List<DashboardRecentSale> data) {
+    return data.asMap().entries.map((entry) {
+      final index = entry.key;
+      final sale = entry.value;
+      return FlSpot(index.toDouble(), sale.sales.toDouble());
+    }).toList();
+  }
+
+  double _getMaxValue() {
+    if (salesData.isEmpty) return 1000000;
+
+    double maxValue = salesData
+        .map((e) => e.sales.toDouble())
+        .reduce((a, b) => a > b ? a : b);
+
+    // Add 20% padding to max value
+    return maxValue * 1.2;
+  }
+
+  String _formatCurrency(double value) {
+    if (value >= 1000000) {
+      return '${(value / 1000000).toStringAsFixed(1)}M';
+    } else if (value >= 1000) {
+      return '${(value / 1000).toStringAsFixed(0)}K';
+    }
+    return value.toStringAsFixed(0);
+  }
+
+  String _getDayName(int weekday) {
+    const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+    return days[weekday - 1];
+  }
+
   Widget _buildLegendItem(String label, Color color) {
     return Row(
       mainAxisSize: MainAxisSize.min,
@@ -311,7 +453,6 @@ class ReportSales extends StatelessWidget {
           label,
           style: AppStyle.sm.copyWith(
             color: AppColor.textSecondary,
-
             fontWeight: FontWeight.w500,
           ),
         ),

lib/presentation/pages/report/widgets/stat_tile.dart

@@ -7,7 +7,6 @@ class ReportStatTile extends StatelessWidget {
   final String value;
   final IconData icon;
   final Color color;
-  final String change;
   final double animatedValue;
   const ReportStatTile({
     super.key,
@@ -15,7 +14,6 @@ class ReportStatTile extends StatelessWidget {
     required this.value,
     required this.icon,
     required this.color,
-    required this.change,
     required this.animatedValue,
   });
 
@@ -53,20 +51,6 @@ class ReportStatTile extends StatelessWidget {
                 child: Icon(icon, color: color, size: 24),
               ),
               const Spacer(),
-              Container(
-                padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
-                decoration: BoxDecoration(
-                  color: AppColor.success.withOpacity(0.1),
-                  borderRadius: BorderRadius.circular(12),
-                ),
-                child: Text(
-                  change,
-                  style: AppStyle.sm.copyWith(
-                    color: AppColor.success,
-                    fontWeight: FontWeight.w700,
-                  ),
-                ),
-              ),
             ],
           ),
           const SizedBox(height: 16),

lib/presentation/pages/report/widgets/top_product.dart

@@ -1,10 +1,13 @@
 import 'package:flutter/material.dart';
 
+import '../../../../common/extension/extension.dart';
 import '../../../../common/theme/theme.dart';
+import '../../../../domain/analytic/analytic.dart';
 import '../../../components/spacer/spacer.dart';
 
 class ReportTopProduct extends StatelessWidget {
-  const ReportTopProduct({super.key});
+  final List<DashboardTopProduct> products;
+  const ReportTopProduct({super.key, required this.products});
 
   @override
   Widget build(BuildContext context) {
@@ -59,39 +62,25 @@ class ReportTopProduct extends StatelessWidget {
             ],
           ),
           const SpaceHeight(20),
-          _buildEnhancedProductItem(
-            'Kopi Americano',
-            'Rp 25.000',
-            '145 terjual',
-            1,
-          ),
-          _buildEnhancedProductItem(
-            'Nasi Goreng Spesial',
-            'Rp 35.000',
-            '98 terjual',
-            2,
-          ),
-          _buildEnhancedProductItem(
-            'Mie Ayam Bakso',
-            'Rp 28.000',
-            '87 terjual',
-            3,
+          ListView.builder(
+            shrinkWrap: true,
+            physics: const NeverScrollableScrollPhysics(),
+            itemBuilder: (context, index) {
+              return _buildEnhancedProductItem(products[index], index + 1);
+            },
+            itemCount: products.length,
           ),
         ],
       ),
     );
   }
 
-  Widget _buildEnhancedProductItem(
-    String name,
-    String price,
-    String sold,
-    int rank,
-  ) {
+  Widget _buildEnhancedProductItem(DashboardTopProduct product, int rank) {
     final isFirst = rank == 1;
+    final isTopThree = rank <= 3;
+
     return Container(
       margin: const EdgeInsets.only(bottom: 16),
-      padding: const EdgeInsets.all(16),
       decoration: BoxDecoration(
         gradient: isFirst
             ? LinearGradient(
@@ -102,19 +91,81 @@ class ReportTopProduct extends StatelessWidget {
                 begin: Alignment.topLeft,
                 end: Alignment.bottomRight,
               )
+            : isTopThree
+            ? LinearGradient(
+                colors: [
+                  AppColor.primary.withOpacity(0.08),
+                  AppColor.primary.withOpacity(0.03),
+                ],
+                begin: Alignment.topLeft,
+                end: Alignment.bottomRight,
+              )
             : null,
-        color: isFirst ? null : AppColor.backgroundLight,
-        borderRadius: BorderRadius.circular(16),
+        color: isTopThree ? null : AppColor.white,
+        borderRadius: BorderRadius.circular(20),
         border: Border.all(
-          color: isFirst ? AppColor.warning.withOpacity(0.3) : AppColor.border,
+          color: isFirst
+              ? AppColor.warning.withOpacity(0.3)
+              : isTopThree
+              ? AppColor.primary.withOpacity(0.2)
+              : AppColor.border.withOpacity(0.3),
           width: isFirst ? 2 : 1,
         ),
+        boxShadow: [
+          BoxShadow(
+            color: isFirst
+                ? AppColor.warning.withOpacity(0.15)
+                : isTopThree
+                ? AppColor.primary.withOpacity(0.1)
+                : Colors.black.withOpacity(0.04),
+            blurRadius: isFirst ? 16 : 12,
+            offset: const Offset(0, 4),
+            spreadRadius: isFirst ? -2 : -3,
           ),
-      child: Row(
+        ],
+      ),
+      child: ClipRRect(
+        borderRadius: BorderRadius.circular(20),
+        child: Stack(
           children: [
+            // Top accent line for rank 1-3
+            if (isTopThree)
+              Positioned(
+                top: 0,
+                left: 0,
+                right: 0,
+                child: Container(
+                  height: 4,
+                  decoration: BoxDecoration(
+                    gradient: LinearGradient(
+                      colors: isFirst
+                          ? [
+                              AppColor.warning,
+                              AppColor.warning.withOpacity(0.7),
+                            ]
+                          : [
+                              AppColor.primary,
+                              AppColor.primary.withOpacity(0.7),
+                            ],
+                    ),
+                  ),
+                ),
+              ),
+
+            // Main content
+            Padding(
+              padding: const EdgeInsets.all(20),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  // Header with rank and product info
+                  Row(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      // Rank badge
                       Container(
-            width: 48,
-            height: 48,
+                        width: 56,
+                        height: 56,
                         decoration: BoxDecoration(
                           gradient: isFirst
                               ? const LinearGradient(
@@ -122,19 +173,30 @@ class ReportTopProduct extends StatelessWidget {
                                   begin: Alignment.topLeft,
                                   end: Alignment.bottomRight,
                                 )
+                              : isTopThree
+                              ? LinearGradient(
+                                  colors: [
+                                    AppColor.primary,
+                                    AppColor.primary.withOpacity(0.8),
+                                  ],
+                                  begin: Alignment.topLeft,
+                                  end: Alignment.bottomRight,
+                                )
                               : LinearGradient(
                                   colors: [
-                        AppColor.primary.withOpacity(0.8),
-                        AppColor.primaryLight.withOpacity(0.6),
+                                    AppColor.textSecondary.withOpacity(0.8),
+                                    AppColor.textSecondary.withOpacity(0.6),
                                   ],
                                 ),
-              borderRadius: BorderRadius.circular(12),
+                          borderRadius: BorderRadius.circular(16),
                           boxShadow: [
                             BoxShadow(
                               color: isFirst
                                   ? AppColor.warning.withOpacity(0.3)
-                      : AppColor.primary.withOpacity(0.2),
-                  blurRadius: 8,
+                                  : isTopThree
+                                  ? AppColor.primary.withOpacity(0.3)
+                                  : AppColor.textSecondary.withOpacity(0.2),
+                              blurRadius: 10,
                               offset: const Offset(0, 4),
                             ),
                           ],
@@ -144,59 +206,364 @@ class ReportTopProduct extends StatelessWidget {
                               ? const Icon(
                                   Icons.emoji_events,
                                   color: AppColor.white,
-                      size: 24,
+                                  size: 28,
+                                )
+                              : rank == 2
+                              ? const Icon(
+                                  Icons.workspace_premium,
+                                  color: AppColor.white,
+                                  size: 26,
+                                )
+                              : rank == 3
+                              ? const Icon(
+                                  Icons.military_tech,
+                                  color: AppColor.white,
+                                  size: 26,
                                 )
                               : Text(
                                   rank.toString(),
                                   style: AppStyle.xl.copyWith(
                                     color: AppColor.white,
                                     fontWeight: FontWeight.bold,
+                                    fontSize: 18,
                                   ),
                                 ),
                         ),
                       ),
+
                       const SpaceWidth(16),
+
+                      // Product info
                       Expanded(
                         child: Column(
                           crossAxisAlignment: CrossAxisAlignment.start,
                           children: [
                             Text(
-                  name,
+                              product.productName,
                               style: AppStyle.lg.copyWith(
                                 color: AppColor.textPrimary,
-                    fontWeight: FontWeight.w600,
+                                fontWeight: FontWeight.bold,
+                                fontSize: 16,
                               ),
+                              maxLines: 2,
+                              overflow: TextOverflow.ellipsis,
+                            ),
+                            const SpaceHeight(6),
+                            // Category badge
+                            Container(
+                              padding: const EdgeInsets.symmetric(
+                                horizontal: 10,
+                                vertical: 4,
+                              ),
+                              decoration: BoxDecoration(
+                                color: isFirst
+                                    ? AppColor.warning.withOpacity(0.1)
+                                    : AppColor.primary.withOpacity(0.1),
+                                borderRadius: BorderRadius.circular(8),
+                                border: Border.all(
+                                  color: isFirst
+                                      ? AppColor.warning.withOpacity(0.3)
+                                      : AppColor.primary.withOpacity(0.3),
+                                  width: 1,
+                                ),
+                              ),
+                              child: Text(
+                                product.categoryName,
+                                style: AppStyle.xs.copyWith(
+                                  color: isFirst
+                                      ? AppColor.warning
+                                      : AppColor.primary,
+                                  fontWeight: FontWeight.w600,
+                                  letterSpacing: 0.5,
+                                ),
+                                maxLines: 1,
+                                overflow: TextOverflow.ellipsis,
+                              ),
+                            ),
+                          ],
+                        ),
+                      ),
+                    ],
+                  ),
+
+                  const SpaceHeight(16),
+
+                  // Statistics section
+                  Container(
+                    padding: const EdgeInsets.all(14),
+                    decoration: BoxDecoration(
+                      color: AppColor.background.withOpacity(0.5),
+                      borderRadius: BorderRadius.circular(14),
+                      border: Border.all(
+                        color: AppColor.border.withOpacity(0.2),
+                        width: 1,
+                      ),
+                    ),
+                    child: Column(
+                      children: [
+                        // Revenue and Average Price
+                        IntrinsicHeight(
+                          child: Row(
+                            children: [
+                              Expanded(
+                                child: Column(
+                                  crossAxisAlignment: CrossAxisAlignment.start,
+                                  children: [
+                                    Row(
+                                      mainAxisSize: MainAxisSize.min,
+                                      children: [
+                                        Icon(
+                                          Icons.attach_money,
+                                          size: 14,
+                                          color: AppColor.success,
+                                        ),
+                                        const SpaceWidth(3),
+                                        Flexible(
+                                          child: Text(
+                                            'Revenue',
+                                            style: AppStyle.xs.copyWith(
+                                              color: AppColor.textSecondary,
+                                              fontWeight: FontWeight.w500,
+                                              fontSize: 11,
+                                            ),
+                                            overflow: TextOverflow.ellipsis,
+                                          ),
+                                        ),
+                                      ],
                                     ),
                                     const SpaceHeight(4),
-                Row(
+                                    Text(
+                                      product.revenue.currencyFormatRp,
+                                      style: AppStyle.sm.copyWith(
+                                        color: AppColor.success,
+                                        fontWeight: FontWeight.bold,
+                                        fontSize: 13,
+                                      ),
+                                      maxLines: 1,
+                                      overflow: TextOverflow.ellipsis,
+                                    ),
+                                  ],
+                                ),
+                              ),
+
+                              Container(
+                                width: 1,
+                                margin: const EdgeInsets.symmetric(
+                                  horizontal: 10,
+                                ),
+                                color: AppColor.border.withOpacity(0.3),
+                              ),
+
+                              Expanded(
+                                child: Column(
+                                  crossAxisAlignment: CrossAxisAlignment.end,
                                   children: [
+                                    Row(
+                                      mainAxisAlignment: MainAxisAlignment.end,
+                                      mainAxisSize: MainAxisSize.min,
+                                      children: [
+                                        Flexible(
+                                          child: Text(
+                                            'Avg. Price',
+                                            style: AppStyle.xs.copyWith(
+                                              color: AppColor.textSecondary,
+                                              fontWeight: FontWeight.w500,
+                                              fontSize: 11,
+                                            ),
+                                            overflow: TextOverflow.ellipsis,
+                                          ),
+                                        ),
+                                        const SpaceWidth(3),
+                                        Icon(
+                                          Icons.trending_up,
+                                          size: 14,
+                                          color: AppColor.primary,
+                                        ),
+                                      ],
+                                    ),
+                                    const SpaceHeight(4),
+                                    Text(
+                                      product.averagePrice
+                                          .round()
+                                          .currencyFormatRp,
+                                      style: AppStyle.sm.copyWith(
+                                        color: AppColor.primary,
+                                        fontWeight: FontWeight.bold,
+                                        fontSize: 13,
+                                      ),
+                                      maxLines: 1,
+                                      overflow: TextOverflow.ellipsis,
+                                      textAlign: TextAlign.end,
+                                    ),
+                                  ],
+                                ),
+                              ),
+                            ],
+                          ),
+                        ),
+
+                        const SpaceHeight(10),
+
+                        // Quantity Sold and Order Count
+                        IntrinsicHeight(
+                          child: Row(
+                            children: [
+                              Expanded(
+                                child: Column(
+                                  crossAxisAlignment: CrossAxisAlignment.start,
+                                  children: [
+                                    Row(
+                                      mainAxisSize: MainAxisSize.min,
+                                      children: [
+                                        Icon(
+                                          Icons.inventory,
+                                          size: 14,
+                                          color: AppColor.warning,
+                                        ),
+                                        const SpaceWidth(3),
+                                        Flexible(
+                                          child: Text(
+                                            'Sold',
+                                            style: AppStyle.xs.copyWith(
+                                              color: AppColor.textSecondary,
+                                              fontWeight: FontWeight.w500,
+                                              fontSize: 11,
+                                            ),
+                                            overflow: TextOverflow.ellipsis,
+                                          ),
+                                        ),
+                                      ],
+                                    ),
+                                    const SpaceHeight(4),
+                                    Text(
+                                      '${product.quantitySold}',
+                                      style: AppStyle.sm.copyWith(
+                                        color: AppColor.warning,
+                                        fontWeight: FontWeight.bold,
+                                        fontSize: 13,
+                                      ),
+                                    ),
+                                  ],
+                                ),
+                              ),
+
+                              Container(
+                                width: 1,
+                                margin: const EdgeInsets.symmetric(
+                                  horizontal: 10,
+                                ),
+                                color: AppColor.border.withOpacity(0.3),
+                              ),
+
+                              Expanded(
+                                child: Column(
+                                  crossAxisAlignment: CrossAxisAlignment.end,
+                                  children: [
+                                    Row(
+                                      mainAxisAlignment: MainAxisAlignment.end,
+                                      mainAxisSize: MainAxisSize.min,
+                                      children: [
+                                        Flexible(
+                                          child: Text(
+                                            'Orders',
+                                            style: AppStyle.xs.copyWith(
+                                              color: AppColor.textSecondary,
+                                              fontWeight: FontWeight.w500,
+                                              fontSize: 11,
+                                            ),
+                                            overflow: TextOverflow.ellipsis,
+                                          ),
+                                        ),
+                                        const SpaceWidth(3),
                                         Icon(
                                           Icons.shopping_cart,
                                           size: 14,
-                      color: AppColor.textSecondary,
+                                          color: AppColor.info,
                                         ),
-                    const SpaceWidth(4),
+                                      ],
+                                    ),
+                                    const SpaceHeight(4),
                                     Text(
-                      sold,
+                                      '${product.orderCount}',
                                       style: AppStyle.sm.copyWith(
-                        color: AppColor.textSecondary,
-                      ),
-                    ),
-                  ],
-                ),
-              ],
-            ),
-          ),
-          Text(
-            price,
-            style: AppStyle.lg.copyWith(
-              color: isFirst ? AppColor.warning : AppColor.primary,
-              fontSize: 16,
+                                        color: AppColor.info,
                                         fontWeight: FontWeight.bold,
+                                        fontSize: 13,
                                       ),
                                     ),
                                   ],
                                 ),
+                              ),
+                            ],
+                          ),
+                        ),
+                      ],
+                    ),
+                  ),
+
+                  // Performance indicator for top 3
+                  if (isTopThree) ...[
+                    const SpaceHeight(10),
+                    Container(
+                      padding: const EdgeInsets.symmetric(
+                        horizontal: 10,
+                        vertical: 6,
+                      ),
+                      decoration: BoxDecoration(
+                        gradient: LinearGradient(
+                          colors: isFirst
+                              ? [
+                                  AppColor.warning.withOpacity(0.2),
+                                  AppColor.warning.withOpacity(0.1),
+                                ]
+                              : [
+                                  AppColor.primary.withOpacity(0.2),
+                                  AppColor.primary.withOpacity(0.1),
+                                ],
+                        ),
+                        borderRadius: BorderRadius.circular(10),
+                        border: Border.all(
+                          color: isFirst
+                              ? AppColor.warning.withOpacity(0.3)
+                              : AppColor.primary.withOpacity(0.3),
+                          width: 1,
+                        ),
+                      ),
+                      child: Row(
+                        mainAxisAlignment: MainAxisAlignment.center,
+                        mainAxisSize: MainAxisSize.min,
+                        children: [
+                          Icon(
+                            isFirst ? Icons.star : Icons.trending_up,
+                            size: 14,
+                            color: isFirst
+                                ? AppColor.warning
+                                : AppColor.primary,
+                          ),
+                          const SpaceWidth(5),
+                          Flexible(
+                            child: Text(
+                              isFirst ? 'Best Seller' : 'Top Performer',
+                              style: AppStyle.xs.copyWith(
+                                color: isFirst
+                                    ? AppColor.warning
+                                    : AppColor.primary,
+                                fontWeight: FontWeight.bold,
+                                fontSize: 11,
+                              ),
+                              overflow: TextOverflow.ellipsis,
+                            ),
+                          ),
+                        ],
+                      ),
+                    ),
+                  ],
+                ],
+              ),
+            ),
+          ],
+        ),
+      ),
     );
   }
 }

lib/presentation/router/app_router.gr.dart

@@ -57,7 +57,7 @@ class CustomerRoute extends _i18.PageRouteInfo<void> {
   static _i18.PageInfo page = _i18.PageInfo(
     name,
     builder: (data) {
-      return const _i1.CustomerPage();
+      return _i18.WrappedRoute(child: const _i1.CustomerPage());
     },
   );
 }