feat: integrate enakgame and voucher

lib/presentation/pages/auth/login/login_page.dart

@@ -16,7 +16,12 @@ import 'widgets/phone_field.dart';
 
 @RoutePage()
 class LoginPage extends StatelessWidget implements AutoRouteWrapper {
-  const LoginPage({super.key});
+  const LoginPage({super.key, this.returnAfterLogin = false});
+
+  /// Login ulang dari tengah alur (mis. token kedaluwarsa saat main
+  /// EnakGame): setelah berhasil, halaman login di-pop dengan hasil `true`
+  /// alih-alih membuka beranda.
+  final bool returnAfterLogin;
 
   @override
   Widget build(BuildContext context) {
@@ -40,6 +45,7 @@ class LoginPage extends StatelessWidget implements AutoRouteWrapper {
                   context.router.push(
                     PasswordRoute(
                       phoneNumber: getNormalizePhone(state.phoneNumber),
+                      returnAfterLogin: returnAfterLogin,
                     ),
                   );
                 }

lib/presentation/pages/auth/password/password_page.dart

@@ -13,7 +13,14 @@ import '../../../router/app_router.gr.dart';
 @RoutePage()
 class PasswordPage extends StatelessWidget implements AutoRouteWrapper {
   final String phoneNumber;
-  const PasswordPage({super.key, required this.phoneNumber});
+
+  /// Lihat [LoginPage.returnAfterLogin].
+  final bool returnAfterLogin;
+  const PasswordPage({
+    super.key,
+    required this.phoneNumber,
+    this.returnAfterLogin = false,
+  });
 
   @override
   Widget build(BuildContext context) {
@@ -28,6 +35,12 @@ class PasswordPage extends StatelessWidget implements AutoRouteWrapper {
               AppFlushbar.showSuccess(context, data.message);
               Future.delayed(Duration(milliseconds: 1000), () {
                 context.read<AuthBloc>().add(AuthEvent.fetchCurrentUser());
+                if (returnAfterLogin) {
+                  final router = context.router;
+                  router.popUntilRouteWithName(LoginRoute.name);
+                  router.pop(true);
+                  return;
+                }
                 context.router.replaceAll([MainRoute()]);
               });
             },

lib/presentation/pages/enakgame/enakgame_page.dart

@@ -0,0 +1,368 @@
+import 'dart:convert';
+import 'dart:developer';
+
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:shared_preferences/shared_preferences.dart';
+import 'package:url_launcher/url_launcher.dart';
+import 'package:webview_flutter/webview_flutter.dart';
+import 'package:webview_flutter_android/webview_flutter_android.dart';
+import 'package:webview_flutter_wkwebview/webview_flutter_wkwebview.dart';
+
+import '../../../application/wallet/wallet_loader/wallet_loader_bloc.dart';
+import '../../../common/constant/app_constant.dart';
+import '../../../common/constant/local_storage_key.dart';
+import '../../../common/theme/theme.dart';
+import '../../../env.dart';
+import '../../../injection.dart';
+import '../../components/button/button.dart';
+import '../../router/app_router.gr.dart';
+import '../wallet/widgets/wallet_confirm_dialog.dart';
+
+/// EnakGame di webview layar penuh: web game.enaklo.com yang menampilkan
+/// daftar game, memulai session, memotong EnakCoin, dan menampilkan hadiah.
+/// Aplikasi hanya memberi token lewat bridge (§8.3) dan tidak pernah
+/// menaruhnya di URL.
+@RoutePage()
+class EnakGamePage extends StatefulWidget {
+  const EnakGamePage({super.key});
+
+  @override
+  State<EnakGamePage> createState() => _EnakGamePageState();
+}
+
+class _EnakGamePageState extends State<EnakGamePage> {
+  /// Game → aplikasi: JavaScript channel dengan pesan berupa JSON string.
+  static const String _hostChannel = 'EnakGameHost';
+
+  static const _nativeChannel = MethodChannel(
+    'com.apskel.enaklocustomer/webview',
+  );
+
+  late final WebViewController _controller;
+
+  /// Lewat notifier, bukan setState, supaya WebView tidak ikut di-rebuild
+  /// setiap progres berubah.
+  final ValueNotifier<int> _progress = ValueNotifier(0);
+  bool _hasError = false;
+  bool _isRelogging = false;
+  bool _isExiting = false;
+
+  String? get _token =>
+      getIt<SharedPreferences>().getString(LocalStorageKey.token);
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = WebViewController();
+    _load();
+  }
+
+  @override
+  void dispose() {
+    _progress.dispose();
+    super.dispose();
+  }
+
+  Future<void> _load() async {
+    try {
+      await _controller.setJavaScriptMode(JavaScriptMode.unrestricted);
+      await _controller.setBackgroundColor(AppConstant.gameBackgroundColor);
+      await _controller.setNavigationDelegate(
+        NavigationDelegate(
+          onProgress: (progress) => _progress.value = progress,
+          onPageStarted: (_) {
+            if (mounted && _hasError) setState(() => _hasError = false);
+          },
+          onWebResourceError: (error) {
+            // Error sub-resource (gambar, script pihak ketiga) diabaikan.
+            if (error.isForMainFrame == false) return;
+            if (mounted) setState(() => _hasError = true);
+          },
+          onNavigationRequest: _onNavigationRequest,
+        ),
+      );
+      // Bridge dipasang sebelum halaman dimuat.
+      await _controller.addJavaScriptChannel(
+        _hostChannel,
+        onMessageReceived: _onMessage,
+      );
+
+      final platform = _controller.platform;
+      if (platform is AndroidWebViewController) {
+        await _enableOffscreenPreRaster(platform);
+      }
+      // Swipe dari tepi kiri di iOS untuk mundur di riwayat web.
+      if (platform is WebKitWebViewController) {
+        await platform.setAllowsBackForwardNavigationGestures(true);
+      }
+
+      await _controller.loadRequest(Uri.parse(AppConstant.gameUrl));
+    } catch (e, s) {
+      log('load', name: 'EnakGamePage', error: e, stackTrace: s);
+      if (mounted) setState(() => _hasError = true);
+    }
+  }
+
+  /// Daftar game di web di-scroll; tanpa pre-raster, Android WebView
+  /// menggambar ulang bagian yang kembali masuk layar. Lihat `MainActivity.kt`.
+  Future<void> _enableOffscreenPreRaster(
+    AndroidWebViewController platform,
+  ) async {
+    try {
+      await _nativeChannel.invokeMethod('enableOffscreenPreRaster', {
+        'webViewId': platform.webViewIdentifier,
+      });
+    } on PlatformException catch (e, s) {
+      log('enableOffscreenPreRaster', error: e, stackTrace: s);
+    }
+  }
+
+  void _onMessage(JavaScriptMessage message) {
+    final Object? decoded;
+    try {
+      decoded = jsonDecode(message.message);
+    } on FormatException {
+      return;
+    }
+    if (decoded is! Map) return;
+
+    switch (decoded['type']) {
+      case 'ready':
+        _sendInit();
+      case 'token_expired':
+        _relogin();
+      case 'balance_changed':
+        final coinBalance = decoded['coin_balance'];
+        if (coinBalance is num) {
+          context.read<WalletLoaderBloc>().add(
+            WalletLoaderEvent.coinBalanceUpdated(coinBalance.toInt()),
+          );
+        }
+      case 'close':
+        if (!_isRelogging) _exit();
+    }
+    // Tipe lain diabaikan.
+  }
+
+  /// Tanpa `game_id`: game dipilih customer di web, bukan di aplikasi.
+  void _sendInit() {
+    final token = _token;
+    if (token == null) {
+      _relogin();
+      return;
+    }
+    _send({
+      'type': 'init',
+      'api_base_url': '${getIt<Env>().baseUrl}/api/v1',
+      'token': token,
+    });
+  }
+
+  /// Aplikasi → game: `window.enakGame.receive('<json>')`.
+  Future<void> _send(Map<String, Object?> message) async {
+    // Encode dua kali: JSON pesan dijadikan string literal JavaScript.
+    final argument = jsonEncode(jsonEncode(message));
+    try {
+      await _controller.runJavaScript(
+        'window.enakGame && window.enakGame.receive($argument);',
+      );
+    } catch (e) {
+      // Pesan berisi token: jangan ikut dicatat.
+      log('send ${message['type']} failed', name: 'EnakGamePage');
+    }
+  }
+
+  /// Belum ada refresh token: customer login ulang, lalu token baru dikirim
+  /// ke game. Bila batal, game ditutup.
+  Future<void> _relogin() async {
+    if (_isRelogging || _isExiting) return;
+    _isRelogging = true;
+
+    final proceed = await showWalletConfirmDialog(
+      context,
+      title: 'Sesi berakhir',
+      message: 'Masuk lagi untuk melanjutkan permainan.',
+      confirmLabel: 'Masuk',
+    );
+    final loggedIn =
+        proceed &&
+        mounted &&
+        await context.router.push<bool>(LoginRoute(returnAfterLogin: true)) ==
+            true;
+
+    _isRelogging = false;
+    if (!mounted) return;
+
+    final token = _token;
+    if (loggedIn && token != null) {
+      _send({'type': 'token', 'token': token});
+    } else {
+      _exit();
+    }
+  }
+
+  /// Menutup game lalu memuat ulang saldo, karena EnakCoin bisa berubah
+  /// selama main.
+  void _exit() {
+    if (_isExiting) return;
+    _isExiting = true;
+    context.read<WalletLoaderBloc>().add(const WalletLoaderEvent.fetched());
+
+    // Dialog yang masih terbuka (mis. konfirmasi keluar) ikut ditutup.
+    final navigator = Navigator.of(context);
+    final route = ModalRoute.of(context);
+    navigator.popUntil((r) => r == route);
+    navigator.pop();
+  }
+
+  /// Tombol back Android mundur di riwayat web dulu. Di halaman pertama,
+  /// game tidak langsung ditutup: minta konfirmasi.
+  Future<void> _onPopInvoked(bool didPop, Object? result) async {
+    if (didPop || _isExiting) return;
+    if (_hasError) {
+      _exit();
+      return;
+    }
+    if (await _controller.canGoBack()) {
+      await _controller.goBack();
+      return;
+    }
+    if (!mounted) return;
+
+    final leave = await showWalletConfirmDialog(
+      context,
+      title: 'Keluar dari game?',
+      message: 'EnakCoin yang sudah dipakai untuk main tidak kembali.',
+      confirmLabel: 'Keluar',
+    );
+    if (leave && mounted) _exit();
+  }
+
+  /// Skema selain http/https (tel:, mailto:, whatsapp:, intent:) diserahkan
+  /// ke aplikasi luar karena WebView tidak bisa membukanya.
+  Future<NavigationDecision> _onNavigationRequest(
+    NavigationRequest request,
+  ) async {
+    final uri = Uri.tryParse(request.url);
+    if (uri == null || uri.scheme == 'http' || uri.scheme == 'https') {
+      return NavigationDecision.navigate;
+    }
+
+    await launchUrl(uri, mode: LaunchMode.externalApplication);
+    return NavigationDecision.prevent;
+  }
+
+  void _reload() {
+    setState(() => _hasError = false);
+    _controller.reload();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return AnnotatedRegion<SystemUiOverlayStyle>(
+      value:
+          (_hasError ? SystemUiOverlayStyle.dark : SystemUiOverlayStyle.light)
+              .copyWith(statusBarColor: Colors.transparent),
+      child: PopScope(
+        canPop: false,
+        onPopInvokedWithResult: _onPopInvoked,
+        child: Scaffold(
+          backgroundColor: AppConstant.gameBackgroundColor,
+          // WebView tetap terpasang saat error, supaya "Coba lagi" tidak
+          // membuat ulang native view-nya.
+          body: Stack(
+            children: [
+              _buildWebView(),
+              Positioned(
+                top: MediaQuery.paddingOf(context).top,
+                left: 0,
+                right: 0,
+                child: _buildProgress(),
+              ),
+              if (_hasError) Positioned.fill(child: _buildError()),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  /// Android memakai Hybrid Composition: WebView digambar langsung oleh
+  /// Android, jauh lebih lancar untuk game yang terus beranimasi.
+  Widget _buildWebView() {
+    final platform = _controller.platform;
+    return WebViewWidget.fromPlatformCreationParams(
+      params: platform is AndroidWebViewController
+          ? AndroidWebViewWidgetCreationParams(
+              controller: platform,
+              displayWithHybridComposition: true,
+            )
+          : PlatformWebViewWidgetCreationParams(controller: platform),
+    );
+  }
+
+  Widget _buildProgress() {
+    return ValueListenableBuilder<int>(
+      valueListenable: _progress,
+      builder: (context, progress, _) => progress < 100 && !_hasError
+          ? LinearProgressIndicator(
+              value: progress / 100,
+              minHeight: 2,
+              color: AppColor.primary,
+              backgroundColor: AppColor.primaryWithOpacity(0.1),
+            )
+          : const SizedBox(height: 2),
+    );
+  }
+
+  Widget _buildError() {
+    return ColoredBox(
+      color: AppColor.white,
+      child: SafeArea(
+        child: Stack(
+          children: [
+            Center(
+              child: Padding(
+                padding: const EdgeInsets.all(24),
+                child: Column(
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    const Icon(
+                      Icons.wifi_off,
+                      size: 56,
+                      color: AppColor.textSecondary,
+                    ),
+                    const SizedBox(height: 16),
+                    Text(
+                      'Game tidak bisa dimuat. Periksa koneksi internet kamu.',
+                      style: AppStyle.md,
+                      textAlign: TextAlign.center,
+                    ),
+                    const SizedBox(height: 16),
+                    AppOutlineButton(
+                      title: 'Coba lagi',
+                      width: 160,
+                      onPressed: _reload,
+                    ),
+                  ],
+                ),
+              ),
+            ),
+            Positioned(
+              top: 4,
+              left: 4,
+              child: IconButton(
+                icon: const Icon(Icons.close),
+                tooltip: 'Tutup',
+                onPressed: _exit,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/presentation/pages/main/main_page.dart

@@ -21,11 +21,11 @@ class _MainPageState extends State<MainPage> {
     context.read<AuthBloc>().add(const AuthEvent.fetchCurrentUser());
   }
 
-  /// Kode bayar di kasir; PIN diminta di halamannya sendiri.
-  void _openPay() {
+  /// Beranda EnakPoint & EnakCoin: tukar, transfer, game, dan voucher.
+  void _openWallet() {
     final isAuthenticated = context.read<AuthBloc>().state.isAuthenticated;
     context.router.push(
-      isAuthenticated ? const PaymentCodeRoute() : const OnboardingRoute(),
+      isAuthenticated ? const WalletRoute() : const OnboardingRoute(),
     );
   }
 
@@ -48,11 +48,11 @@ class _MainPageState extends State<MainPage> {
           body: child,
           floatingActionButton: isKeyboardOpen
               ? null
-              : MainPayButton(onPressed: _openPay),
-          floatingActionButtonLocation: const MainPayButtonLocation(),
+              : MainWalletButton(onPressed: _openWallet),
+          floatingActionButtonLocation: const MainWalletButtonLocation(),
           bottomNavigationBar: MainBottomNavbar(
             tabsRouter: AutoTabsRouter.of(context),
-            onPayTap: _openPay,
+            onWalletTap: _openWallet,
           ),
         );
       },

lib/presentation/pages/main/pages/home/widgets/point_card.dart

@@ -44,7 +44,7 @@ class HomePointCard extends StatelessWidget {
                       Expanded(
                         child: Text(
                           isAuthenticated
-                              ? 'Bayar di kasir, tukar, transfer & main game'
+                              ? 'Tukar voucher, transfer & main game'
                               : 'Silahkan login untuk melihat EnakPoint kamu',
                           style: AppStyle.sm.copyWith(
                             color: AppColor.textSecondary,

lib/presentation/pages/main/pages/home/widgets/service_section.dart

@@ -5,7 +5,6 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
 import '../../../../../../application/auth/auth_bloc.dart';
-import '../../../../../../common/constant/app_constant.dart';
 import '../../../../../../common/theme/theme.dart';
 import '../../../../../components/assets/assets.gen.dart';
 import '../../../../../components/toast/flushbar.dart';
@@ -38,12 +37,8 @@ class HomeServiceSection extends StatelessWidget {
     _HomeMenu(
       label: 'EnakGame',
       icon: Assets.icons.enakgameIcon,
-      route: WebViewRoute(
-        title: 'EnakGame',
-        url: AppConstant.gameUrl,
-        fullscreen: true,
-        backgroundColor: AppConstant.gameBackgroundColor,
-      ),
+      route: const EnakGameRoute(),
+      requiresLogin: true,
     ),
     _HomeMenu(
       label: 'EnakTransfer',
@@ -55,6 +50,7 @@ class HomeServiceSection extends StatelessWidget {
       label: 'EnakReward',
       icon: Assets.icons.enakrewardIcon,
       route: const RewardRoute(),
+      requiresLogin: true,
     ),
     _HomeMenu(
       label: 'EnakPromo',

lib/presentation/pages/main/widgets/bottom_navbar.dart

@@ -5,29 +5,29 @@ import '../../../../common/theme/theme.dart';
 
 class MainBottomNavbar extends StatelessWidget {
   final TabsRouter tabsRouter;
-  final VoidCallback onPayTap;
+  final VoidCallback onWalletTap;
   const MainBottomNavbar({
     super.key,
     required this.tabsRouter,
-    required this.onPayTap,
+    required this.onWalletTap,
   });
 
-  /// Slot tengah hanya tempat label tombol Bayar; lingkarannya
-  /// [MainPayButton] yang menempel di atas navbar.
-  static const int _payIndex = 2;
+  /// Slot tengah hanya tempat label tombol Poin; lingkarannya
+  /// [MainWalletButton] yang menempel di atas navbar.
+  static const int _walletIndex = 2;
 
   @override
   Widget build(BuildContext context) {
     final activeIndex = tabsRouter.activeIndex;
 
     return BottomNavigationBar(
-      currentIndex: activeIndex >= _payIndex ? activeIndex + 1 : activeIndex,
+      currentIndex: activeIndex >= _walletIndex ? activeIndex + 1 : activeIndex,
       onTap: (index) {
-        if (index == _payIndex) {
-          onPayTap();
+        if (index == _walletIndex) {
+          onWalletTap();
           return;
         }
-        tabsRouter.setActiveIndex(index > _payIndex ? index - 1 : index);
+        tabsRouter.setActiveIndex(index > _walletIndex ? index - 1 : index);
       },
       items: const [
         BottomNavigationBarItem(
@@ -47,8 +47,8 @@ class MainBottomNavbar extends StatelessWidget {
         ),
         BottomNavigationBarItem(
           icon: SizedBox(height: 24),
-          label: 'Bayar',
-          tooltip: 'Bayar di kasir',
+          label: 'Poin',
+          tooltip: 'EnakPoint & EnakCoin',
         ),
         BottomNavigationBarItem(
           icon: Icon(Icons.groups),
@@ -66,10 +66,10 @@ class MainBottomNavbar extends StatelessWidget {
 }
 
 /// Seperti [FloatingActionButtonLocation.centerDocked], tapi tombolnya lebih
-/// menonjol ke atas supaya tidak menempel ke label "Bayar".
-class MainPayButtonLocation extends StandardFabLocation
+/// menonjol ke atas supaya tidak menempel ke label "Poin".
+class MainWalletButtonLocation extends StandardFabLocation
     with FabCenterOffsetX, FabDockedOffsetY {
-  const MainPayButtonLocation();
+  const MainWalletButtonLocation();
 
   static const double _raise = 10;
 
@@ -80,10 +80,10 @@ class MainPayButtonLocation extends StandardFabLocation
   ) => super.getOffsetY(scaffoldGeometry, adjustment) - _raise;
 }
 
-/// Tombol bulat di tengah navbar, dipasang di [MainPayButtonLocation].
-class MainPayButton extends StatelessWidget {
+/// Tombol bulat di tengah navbar, dipasang di [MainWalletButtonLocation].
+class MainWalletButton extends StatelessWidget {
   final VoidCallback onPressed;
-  const MainPayButton({super.key, required this.onPressed});
+  const MainWalletButton({super.key, required this.onPressed});
 
   @override
   Widget build(BuildContext context) {
@@ -92,12 +92,12 @@ class MainPayButton extends StatelessWidget {
       // Halaman tab (mis. Community) juga punya FAB; tanpa hero supaya tag
       // default tidak bentrok saat pindah halaman.
       heroTag: null,
-      tooltip: 'Bayar di kasir',
+      tooltip: 'EnakPoint & EnakCoin',
       elevation: 4,
       backgroundColor: AppColor.primary,
       foregroundColor: AppColor.white,
       shape: const CircleBorder(),
-      child: const Icon(Icons.qr_code_scanner_rounded, size: 28),
+      child: const Icon(Icons.stars_rounded, size: 30),
     );
   }
 }

lib/presentation/pages/mini_games/ferris_wheel/data/model.dart

@@ -1,100 +0,0 @@
-import 'package:flutter/material.dart';
-
-class WheelSection {
-  final Color color;
-  final IconData icon;
-  final String prize;
-  final int value;
-
-  WheelSection({
-    required this.color,
-    required this.icon,
-    required this.prize,
-    required this.value,
-  });
-}
-
-class PrizeHistory {
-  final String prize;
-  final DateTime dateTime;
-  final int value;
-  final Color color;
-  final IconData icon;
-  final String? gamePrizeId; // Added for API integration
-
-  PrizeHistory({
-    required this.prize,
-    required this.dateTime,
-    required this.value,
-    required this.color,
-    required this.icon,
-    this.gamePrizeId,
-  });
-
-  // CopyWith method for updating properties
-  PrizeHistory copyWith({
-    String? prize,
-    DateTime? dateTime,
-    int? value,
-    Color? color,
-    IconData? icon,
-    String? gamePrizeId,
-  }) {
-    return PrizeHistory(
-      prize: prize ?? this.prize,
-      dateTime: dateTime ?? this.dateTime,
-      value: value ?? this.value,
-      color: color ?? this.color,
-      icon: icon ?? this.icon,
-      gamePrizeId: gamePrizeId ?? this.gamePrizeId,
-    );
-  }
-
-  // Convert to Map for storage/API calls
-  Map<String, dynamic> toMap() {
-    return {
-      'prize': prize,
-      'dateTime': dateTime.toIso8601String(),
-      'value': value,
-      'gamePrizeId': gamePrizeId,
-    };
-  }
-
-  // Create from Map for loading from storage/API
-  factory PrizeHistory.fromMap(
-    Map<String, dynamic> map, {
-    required Color color,
-    required IconData icon,
-  }) {
-    return PrizeHistory(
-      prize: map['prize'] ?? '',
-      dateTime: DateTime.tryParse(map['dateTime'] ?? '') ?? DateTime.now(),
-      value: map['value'] ?? 0,
-      color: color,
-      icon: icon,
-      gamePrizeId: map['gamePrizeId'],
-    );
-  }
-
-  // Format date for display
-  String get formattedDate {
-    return '${dateTime.day.toString().padLeft(2, '0')}/${dateTime.month.toString().padLeft(2, '0')}/${dateTime.year} ${dateTime.hour.toString().padLeft(2, '0')}:${dateTime.minute.toString().padLeft(2, '0')}';
-  }
-
-  // Get prize category based on value
-  String get prizeCategory {
-    if (value >= 1000000) return 'Jackpot';
-    if (value >= 100000) return 'Big Prize';
-    if (value >= 10000) return 'Medium Prize';
-    if (value >= 1000) return 'Small Prize';
-    return 'Token/Spin';
-  }
-
-  // Get prize category color
-  Color get categoryColor {
-    if (value >= 1000000) return const Color(0xFFFFD700); // Gold
-    if (value >= 100000) return const Color(0xFFC0C0C0); // Silver
-    if (value >= 10000) return const Color(0xFFCD7F32); // Bronze
-    return color; // Default color
-  }
-}

lib/presentation/pages/onboarding/onboarding_page.dart

@@ -173,7 +173,7 @@ class _OnboardingPageState extends State<OnboardingPage> {
           const Spacer(),
 
           AppElevatedButton(
-            onPressed: () => context.router.push(const LoginRoute()),
+            onPressed: () => context.router.push(LoginRoute()),
             title: 'Masuk',
           ),
 

lib/presentation/pages/order/order_detail/order_detail_page.dart

@@ -437,26 +437,17 @@ class _PaymentRow extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    // Pembayaran EnakPoint: "EnakPoint 12.500 (Rp 12.500)".
-    final title = payment.isPoint && payment.pointsUsed != null
-        ? '${WalletCurrency.point.label} ${payment.pointsUsed!.thousandFormat}'
-        : payment.methodName;
-
     return Padding(
       padding: const EdgeInsets.symmetric(vertical: 4),
       child: Row(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
-          if (payment.isPoint) ...[
-            const WalletCurrencyIcon(currency: WalletCurrency.point, size: 20),
-            const SizedBox(width: 8),
-          ],
           Expanded(
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.start,
               children: [
                 Text(
-                  title,
+                  payment.methodName,
                   style: AppStyle.sm.copyWith(fontWeight: FontWeight.w600),
                 ),
                 if (payment.refundAmount > 0)
@@ -468,9 +459,7 @@ class _PaymentRow extends StatelessWidget {
             ),
           ),
           Text(
-            payment.isPoint
-                ? '(${payment.amount.currencyFormatRp})'
-                : payment.amount.currencyFormatRp,
+            payment.amount.currencyFormatRp,
             style: AppStyle.sm.copyWith(fontWeight: FontWeight.w600),
           ),
         ],

lib/presentation/pages/outlet/widgets/outlet_tile.dart

@@ -53,24 +53,12 @@ class OutletTile extends StatelessWidget {
                     style: AppStyle.xs.copyWith(color: AppColor.textSecondary),
                   ),
                 ],
-                if (outlet.acceptsPointPayment ||
-                    outlet.earnsPoints ||
-                    outlet.earnsCoins) ...[
+                if (outlet.earnsPoints || outlet.earnsCoins) ...[
                   const SizedBox(height: 8),
                   Wrap(
                     spacing: 6,
                     runSpacing: 6,
                     children: [
-                      if (outlet.acceptsPointPayment)
-                        const _Chip(
-                          label: 'Bisa bayar pakai EnakPoint',
-                          icon: Icon(
-                            Icons.check_circle_rounded,
-                            size: 14,
-                            color: AppColor.primary,
-                          ),
-                          highlighted: true,
-                        ),
                       if (outlet.earnsPoints)
                         const _Chip(
                           label: 'Dapat EnakPoint',
@@ -100,24 +88,17 @@ class OutletTile extends StatelessWidget {
 }
 
 class _Chip extends StatelessWidget {
-  const _Chip({
-    required this.label,
-    required this.icon,
-    this.highlighted = false,
-  });
+  const _Chip({required this.label, required this.icon});
 
   final String label;
   final Widget icon;
-  final bool highlighted;
 
   @override
   Widget build(BuildContext context) {
     return Container(
       padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
       decoration: BoxDecoration(
-        color: highlighted
-            ? AppColor.primaryWithOpacity(0.08)
-            : AppColor.background,
+        color: AppColor.background,
         borderRadius: BorderRadius.circular(999),
       ),
       child: Row(
@@ -129,7 +110,7 @@ class _Chip extends StatelessWidget {
             label,
             style: AppStyle.xs.copyWith(
               fontSize: 10,
-              color: highlighted ? AppColor.primary : AppColor.textPrimary,
+              color: AppColor.textPrimary,
               fontWeight: FontWeight.w700,
             ),
           ),

lib/presentation/pages/pin/pin_settings_page.dart

@@ -79,9 +79,9 @@ class _PinSettingsPageState extends State<PinSettingsPage> {
                     borderRadius: BorderRadius.circular(AppValue.borderRadius),
                   ),
                   child: Text(
-                    'PIN 6 digit dipakai untuk membuat kode bayar, tukar '
-                    'EnakCoin, dan transfer. PIN berbeda dengan password '
-                    'login dan jangan diberitahukan kepada siapa pun.',
+                    'PIN 6 digit dipakai untuk tukar EnakCoin, transfer, dan '
+                    'tukar voucher. PIN berbeda dengan password login dan '
+                    'jangan diberitahukan kepada siapa pun.',
                     style: AppStyle.md.copyWith(color: AppColor.textSecondary),
                   ),
                 ),

lib/presentation/pages/pin/pin_setup_page.dart

@@ -189,8 +189,8 @@ class _PinSetupPageState extends State<PinSetupPage> {
       _Step.otp =>
         'Kami mengirim kode 6 digit ke WhatsApp nomor kamu yang terdaftar.',
       _Step.pin =>
-        'PIN 6 digit dipakai untuk membuat kode bayar, tukar EnakCoin, dan '
-            'transfer. PIN berbeda dengan password login.',
+        'PIN 6 digit dipakai untuk tukar EnakCoin, transfer, dan tukar '
+            'voucher. PIN berbeda dengan password login.',
       _Step.confirm => 'Masukkan kembali PIN yang sama.',
       _Step.done => '',
     };
@@ -318,9 +318,9 @@ class _PinSetupPageState extends State<PinSetupPage> {
         Text(
           _isReset
               ? 'Demi keamanan, transfer keluar ditahan selama 24 jam. '
-                    'Kode bayar dan tukar EnakCoin tetap bisa dipakai.'
-              : 'Gunakan PIN ini untuk membuat kode bayar, tukar EnakCoin, '
-                    'dan transfer. Jangan beritahu PIN kepada siapa pun.',
+                    'Tukar EnakCoin dan tukar voucher tetap bisa dipakai.'
+              : 'Gunakan PIN ini untuk tukar EnakCoin, transfer, dan tukar '
+                    'voucher. Jangan beritahu PIN kepada siapa pun.',
           style: AppStyle.md.copyWith(color: AppColor.textSecondary),
           textAlign: TextAlign.center,
         ),

lib/presentation/pages/promo/pages/promo_detail/promo_detail_page.dart

@@ -1,6 +1,8 @@
 import 'package:auto_route/auto_route.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
 
+import '../../../../../application/auth/auth_bloc.dart';
 import '../../../../../common/theme/theme.dart';
 import '../../../../../sample/promo_sample_data.dart';
 import '../../../../components/button/button.dart';
@@ -98,9 +100,14 @@ class PromoDetailPage extends StatelessWidget {
           child: Padding(
             padding: const EdgeInsets.fromLTRB(16, 12, 16, 12),
             child: AppElevatedButton(
-              title: isReward ? 'Lihat Reward Saya' : 'Cari Outlet',
+              title: isReward ? 'Buka EnakReward' : 'Cari Outlet',
+              // Voucher dan outlet memakai API customer: tamu masuk dulu.
               onPressed: () => context.router.push(
-                isReward ? const RewardRoute() : const OutletRoute(),
+                !context.read<AuthBloc>().state.isAuthenticated
+                    ? const OnboardingRoute()
+                    : isReward
+                    ? const RewardRoute()
+                    : const OutletRoute(),
               ),
             ),
           ),

lib/presentation/pages/reward/reward_detail_page.dart

@@ -0,0 +1,410 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+
+import '../../../application/voucher/voucher_redeem_form/voucher_redeem_form_bloc.dart';
+import '../../../application/wallet/wallet_loader/wallet_loader_bloc.dart';
+import '../../../common/extension/extension.dart';
+import '../../../common/theme/theme.dart';
+import '../../../domain/wallet/wallet.dart';
+import '../../../injection.dart';
+import '../../components/button/button.dart';
+import '../../components/toast/flushbar.dart';
+import '../pin/pin_guard.dart';
+import '../pin/widgets/pin_sheet.dart';
+import '../wallet/wallet_ui.dart';
+import '../wallet/widgets/wallet_confirm_dialog.dart';
+import 'reward_ui.dart';
+
+/// Detail voucher di katalog dan tukar EnakPoint ke voucher (§9.2). Pop
+/// dengan `true` bila voucher berhasil ditukar.
+@RoutePage()
+class RewardDetailPage extends StatefulWidget implements AutoRouteWrapper {
+  const RewardDetailPage({super.key, required this.voucher});
+
+  final Voucher voucher;
+
+  @override
+  State<RewardDetailPage> createState() => _RewardDetailPageState();
+
+  @override
+  Widget wrappedRoute(BuildContext context) =>
+      BlocProvider(create: (_) => getIt<VoucherRedeemFormBloc>(), child: this);
+}
+
+class _RewardDetailPageState extends State<RewardDetailPage> {
+  /// Diisi bila server menjawab voucher habis / tidak tersedia; katalog
+  /// dimuat ulang saat kembali ke halaman sebelumnya.
+  String? _unavailableMessage;
+
+  Voucher get _voucher => widget.voucher;
+
+  Future<void> _redeem() async {
+    final confirmed = await showWalletConfirmDialog(
+      context,
+      title: 'Tukar voucher?',
+      message:
+          'Tukar ${_voucher.pointCost.thousandFormat} EnakPoint dengan '
+          '${_voucher.name}? Tidak bisa dibatalkan.',
+      confirmLabel: 'Tukar',
+    );
+    if (!confirmed || !mounted) return;
+    if (!await ensurePinReady(context) || !mounted) return;
+
+    final success = await showPinSheet(
+      context,
+      title: 'Tukar voucher',
+      onSubmit: (pin) async {
+        final bloc = context.read<VoucherRedeemFormBloc>();
+        bloc.add(
+          VoucherRedeemFormEvent.submitted(voucherId: _voucher.id, pin: pin),
+        );
+        final result = await bloc.stream.firstWhere((s) => !s.isSubmitting);
+        return result.failureOption.toNullable();
+      },
+      onFailure: _showFailure,
+    );
+
+    if (success && mounted) {
+      context.read<WalletLoaderBloc>().add(const WalletLoaderEvent.fetched());
+    }
+  }
+
+  void _showFailure(WalletFailure failure) {
+    if (failure.isPinError) return;
+
+    if (failure.isNetworkError) {
+      AppFlushbar.showError(
+        context,
+        'Koneksi terputus, status penukaran belum diketahui. Tekan Tukar lagi '
+        'untuk mengulang. EnakPoint tidak akan terpotong dua kali.',
+      );
+      return;
+    }
+
+    final description = describeVoucherRedeemFailure(failure);
+    if (description.reloadCatalog) {
+      setState(() => _unavailableMessage = description.message);
+    }
+    AppFlushbar.showError(context, description.message);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocBuilder<VoucherRedeemFormBloc, VoucherRedeemFormState>(
+      builder: (context, state) {
+        final result = state.result;
+        return PopScope(
+          canPop: result == null,
+          onPopInvokedWithResult: (didPop, _) {
+            if (!didPop && result != null) context.router.pop(true);
+          },
+          child: Scaffold(
+            backgroundColor: AppColor.background,
+            appBar: AppBar(title: const Text('Detail voucher')),
+            body: AnimatedSwitcher(
+              duration: const Duration(milliseconds: 300),
+              child: result != null
+                  ? KeyedSubtree(
+                      key: const ValueKey('success'),
+                      child: _buildSuccess(result),
+                    )
+                  : KeyedSubtree(
+                      key: const ValueKey('detail'),
+                      child: _buildDetail(state),
+                    ),
+            ),
+          ),
+        );
+      },
+    );
+  }
+
+  Widget _buildDetail(VoucherRedeemFormState state) {
+    final faceValue = voucherFaceValueLabel(_voucher.type, _voucher.faceValue);
+
+    return BlocBuilder<WalletLoaderBloc, WalletLoaderState>(
+      builder: (context, walletState) {
+        final pointBalance = walletState.summary.pointBalance;
+        final canAfford =
+            !walletState.hasLoaded || pointBalance >= _voucher.pointCost;
+
+        final String? blockedLabel = _unavailableMessage != null
+            ? 'Voucher tidak tersedia'
+            : _voucher.isOutOfStock
+            ? 'Habis'
+            : !canAfford
+            ? 'EnakPoint kurang'
+            : null;
+
+        return Column(
+          children: [
+            Expanded(
+              child: ListView(
+                padding: const EdgeInsets.all(16),
+                children: [
+                  Container(
+                    padding: const EdgeInsets.all(20),
+                    decoration: BoxDecoration(
+                      color: AppColor.white,
+                      borderRadius: BorderRadius.circular(
+                        AppValue.borderRadius,
+                      ),
+                    ),
+                    child: Column(
+                      children: [
+                        VoucherImage(
+                          url: _voucher.imageUrl,
+                          size: 120,
+                          dimmed:
+                              _voucher.isOutOfStock ||
+                              _unavailableMessage != null,
+                        ),
+                        const SizedBox(height: 16),
+                        Text(
+                          voucherTypeLabel(
+                            _voucher.type,
+                            _voucher.faceValue,
+                          ).toUpperCase(),
+                          style: AppStyle.xs.copyWith(
+                            color: AppColor.textSecondary,
+                            fontWeight: FontWeight.w700,
+                            letterSpacing: 0.6,
+                          ),
+                        ),
+                        const SizedBox(height: 4),
+                        Text(
+                          _voucher.name,
+                          textAlign: TextAlign.center,
+                          style: AppStyle.xl.copyWith(
+                            fontWeight: FontWeight.w700,
+                          ),
+                        ),
+                        if (faceValue != null)
+                          Text(
+                            faceValue,
+                            style: AppStyle.md.copyWith(
+                              color: AppColor.textSecondary,
+                            ),
+                          ),
+                        if (_voucher.description != null) ...[
+                          const SizedBox(height: 12),
+                          Text(
+                            _voucher.description!,
+                            textAlign: TextAlign.center,
+                            style: AppStyle.sm.copyWith(
+                              color: AppColor.textSecondary,
+                              height: 1.5,
+                            ),
+                          ),
+                        ],
+                      ],
+                    ),
+                  ),
+                  const SizedBox(height: 12),
+                  Container(
+                    padding: const EdgeInsets.symmetric(
+                      horizontal: 16,
+                      vertical: 8,
+                    ),
+                    decoration: BoxDecoration(
+                      color: AppColor.white,
+                      borderRadius: BorderRadius.circular(
+                        AppValue.borderRadius,
+                      ),
+                    ),
+                    child: Column(
+                      children: [
+                        _InfoRow(
+                          label: 'Ditukar dengan',
+                          value:
+                              '${_voucher.pointCost.thousandFormat} EnakPoint',
+                        ),
+                        if (walletState.hasLoaded)
+                          _InfoRow(
+                            label: 'Saldo EnakPoint kamu',
+                            value: pointBalance.thousandFormat,
+                            valueColor: canAfford ? null : AppColor.error,
+                          ),
+                        if (_voucher.validUntil != null)
+                          _InfoRow(
+                            label: 'Bisa ditukar sampai',
+                            value: formatWibDateTime(_voucher.validUntil!),
+                          ),
+                        if (_voucher.available != null)
+                          _InfoRow(
+                            label: 'Sisa stok',
+                            value: _voucher.isOutOfStock
+                                ? 'Habis'
+                                : _voucher.available!.thousandFormat,
+                          ),
+                        if (_voucher.maxPerCustomer != null)
+                          _InfoRow(
+                            label: 'Batas tukar',
+                            value:
+                                '${_voucher.maxPerCustomer!.thousandFormat}× '
+                                'per customer',
+                          ),
+                      ],
+                    ),
+                  ),
+                ],
+              ),
+            ),
+            Container(
+              color: AppColor.white,
+              padding: const EdgeInsets.fromLTRB(16, 12, 16, 12),
+              child: SafeArea(
+                top: false,
+                child: AppElevatedButton(
+                  title:
+                      blockedLabel ??
+                      'Tukar ${_voucher.pointCost.thousandFormat} EnakPoint',
+                  height: 48,
+                  isLoading: state.isSubmitting,
+                  onPressed: blockedLabel == null && !state.isSubmitting
+                      ? _redeem
+                      : null,
+                ),
+              ),
+            ),
+          ],
+        );
+      },
+    );
+  }
+
+  Widget _buildSuccess(VoucherRedeemResult result) {
+    final redemption = result.redemption;
+    final isPending = redemption.status == VoucherRedemptionStatus.pending;
+    final isFailed = redemption.status == VoucherRedemptionStatus.failed;
+
+    final (IconData icon, Color color, String title) = isPending
+        ? (
+            Icons.hourglass_top_rounded,
+            AppColor.warning,
+            'Voucher sedang diproses',
+          )
+        : isFailed
+        ? (Icons.undo_rounded, AppColor.error, 'Penukaran gagal')
+        : (Icons.check_circle, AppColor.success, 'Voucher berhasil ditukar');
+
+    return SafeArea(
+      child: Column(
+        children: [
+          Expanded(
+            child: ListView(
+              padding: const EdgeInsets.all(20),
+              children: [
+                const SizedBox(height: 24),
+                Icon(icon, color: color, size: 72),
+                const SizedBox(height: 16),
+                Text(
+                  title,
+                  textAlign: TextAlign.center,
+                  style: AppStyle.xl.copyWith(fontWeight: FontWeight.w700),
+                ),
+                const SizedBox(height: 4),
+                Text(
+                  redemption.voucherName,
+                  textAlign: TextAlign.center,
+                  style: AppStyle.md.copyWith(color: AppColor.textSecondary),
+                ),
+                const SizedBox(height: 24),
+                if (isPending)
+                  _Note(
+                    'EnakPoint sudah terpotong. Cek lagi di Voucher saya. Bila '
+                    'gagal, EnakPoint dikembalikan otomatis.',
+                  )
+                else if (isFailed)
+                  _Note('EnakPoint sudah dikembalikan.')
+                else if (redemption.code != null)
+                  VoucherCodeBox(code: redemption.code!)
+                else
+                  const VoucherNoCodeNote(),
+                const SizedBox(height: 16),
+                if (!isPending && !isFailed && redemption.codeExpiresAt != null)
+                  Text(
+                    'Berlaku sampai '
+                    '${formatWibDateTime(redemption.codeExpiresAt!)}',
+                    textAlign: TextAlign.center,
+                    style: AppStyle.sm.copyWith(color: AppColor.textSecondary),
+                  ),
+                const SizedBox(height: 6),
+                Text(
+                  'Saldo EnakPoint sekarang: '
+                  '${result.pointBalance.thousandFormat}',
+                  textAlign: TextAlign.center,
+                  style: AppStyle.sm.copyWith(color: AppColor.textSecondary),
+                ),
+              ],
+            ),
+          ),
+          Padding(
+            padding: const EdgeInsets.all(20),
+            child: AppElevatedButton(
+              title: 'Lihat voucher saya',
+              onPressed: () => context.router.pop(true),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _Note extends StatelessWidget {
+  const _Note(this.message);
+
+  final String message;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.all(14),
+      decoration: BoxDecoration(
+        color: AppColor.white,
+        borderRadius: BorderRadius.circular(AppValue.borderRadius),
+      ),
+      child: Text(
+        message,
+        textAlign: TextAlign.center,
+        style: AppStyle.sm.copyWith(color: AppColor.textSecondary),
+      ),
+    );
+  }
+}
+
+class _InfoRow extends StatelessWidget {
+  const _InfoRow({required this.label, required this.value, this.valueColor});
+
+  final String label;
+  final String value;
+  final Color? valueColor;
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(vertical: 8),
+      child: Row(
+        children: [
+          Text(
+            label,
+            style: AppStyle.sm.copyWith(color: AppColor.textSecondary),
+          ),
+          const SizedBox(width: 12),
+          Expanded(
+            child: Text(
+              value,
+              textAlign: TextAlign.end,
+              style: AppStyle.sm.copyWith(
+                color: valueColor ?? AppColor.textPrimary,
+                fontWeight: FontWeight.w600,
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/presentation/pages/reward/reward_page.dart

@@ -1,108 +1,281 @@
 import 'package:auto_route/auto_route.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:flutter_spinkit/flutter_spinkit.dart';
 
+import '../../../application/voucher/voucher_loader/voucher_loader_bloc.dart';
+import '../../../application/voucher/voucher_redemption_loader/voucher_redemption_loader_bloc.dart';
+import '../../../application/wallet/wallet_loader/wallet_loader_bloc.dart';
+import '../../../common/extension/extension.dart';
 import '../../../common/theme/theme.dart';
-import '../../../sample/reward_sample_data.dart';
-import '../../components/assets/assets.gen.dart';
-import '../../components/delegate/filter_bar_delegate.dart';
+import '../../../domain/wallet/wallet.dart';
+import '../../../injection.dart';
+import '../../components/button/button.dart';
+import '../../components/toast/flushbar.dart';
 import '../../router/app_router.gr.dart';
-import 'reward_ui.dart';
-import 'widgets/reward_card.dart';
-import 'widgets/reward_detail_sheet.dart';
-
-enum _RewardFilter {
-  all('Semua'),
-  active('Aktif'),
-  used('Terpakai'),
-  expired('Kedaluwarsa');
-
-  const _RewardFilter(this.label);
-
-  final String label;
-
-  bool matches(Reward reward) => switch (this) {
-    _RewardFilter.all => true,
-    _RewardFilter.active => reward.status == RewardStatus.active,
-    _RewardFilter.used => reward.status == RewardStatus.used,
-    _RewardFilter.expired => reward.status == RewardStatus.expired,
-  };
-}
+import '../wallet/wallet_ui.dart';
+import 'widgets/redemption_card.dart';
+import 'widgets/redemption_detail_sheet.dart';
+import 'widgets/voucher_card.dart';
 
+/// EnakReward: tukar EnakPoint ke voucher (§9.1) dan "Voucher saya" (§9.3).
 @RoutePage()
-class RewardPage extends StatefulWidget {
+class RewardPage extends StatefulWidget implements AutoRouteWrapper {
   const RewardPage({super.key});
 
   @override
   State<RewardPage> createState() => _RewardPageState();
+
+  @override
+  Widget wrappedRoute(BuildContext context) => MultiBlocProvider(
+    providers: [
+      BlocProvider(
+        create: (_) =>
+            getIt<VoucherLoaderBloc>()..add(const VoucherLoaderEvent.fetched()),
+      ),
+      BlocProvider(
+        create: (_) =>
+            getIt<VoucherRedemptionLoaderBloc>()
+              ..add(const VoucherRedemptionLoaderEvent.refreshed()),
+      ),
+    ],
+    child: this,
+  );
 }
 
-class _RewardPageState extends State<RewardPage> {
-  _RewardFilter _filter = _RewardFilter.all;
+class _RewardPageState extends State<RewardPage>
+    with SingleTickerProviderStateMixin {
+  late final TabController _tabController = TabController(
+    length: 2,
+    vsync: this,
+  );
 
-  /// Aktif lebih dulu, urut yang paling cepat berakhir; sisanya terbaru dulu.
-  final List<Reward> _rewards = [...rewardSamples]
-    ..sort((a, b) {
-      final aActive = a.status == RewardStatus.active;
-      final bActive = b.status == RewardStatus.active;
-      if (aActive != bActive) return aActive ? -1 : 1;
-      if (aActive) return a.validUntil.compareTo(b.validUntil);
-      return b.redeemedAt.compareTo(a.redeemedAt);
-    });
+  @override
+  void initState() {
+    super.initState();
+    // Tombol Tukar nonaktif bila saldo EnakPoint kurang.
+    context.read<WalletLoaderBloc>().add(const WalletLoaderEvent.fetched());
+  }
 
-  List<Reward> get _activeRewards =>
-      _rewards.where(_RewardFilter.active.matches).toList();
+  @override
+  void dispose() {
+    _tabController.dispose();
+    super.dispose();
+  }
 
-  int _countOf(_RewardFilter filter) => _rewards.where(filter.matches).length;
+  /// Katalog, voucher saya, dan saldo dimuat ulang setiap kembali dari detail:
+  /// stok bisa berubah, dan voucher yang habis harus hilang dari katalog.
+  Future<void> _openDetail(Voucher voucher) async {
+    final redeemed = await context.router.push<bool>(
+      RewardDetailRoute(voucher: voucher),
+    );
+    if (!mounted) return;
+
+    context.read<VoucherLoaderBloc>().add(const VoucherLoaderEvent.fetched());
+    context.read<VoucherRedemptionLoaderBloc>().add(
+      const VoucherRedemptionLoaderEvent.refreshed(),
+    );
+    context.read<WalletLoaderBloc>().add(const WalletLoaderEvent.fetched());
+    if (redeemed == true) _tabController.animateTo(1);
+  }
 
   @override
   Widget build(BuildContext context) {
-    final visible = _rewards.where(_filter.matches).toList();
-
     return Scaffold(
       backgroundColor: AppColor.background,
-      appBar: AppBar(title: const Text('Reward Saya')),
-      body: CustomScrollView(
-        slivers: [
-          SliverToBoxAdapter(child: _buildSummary()),
-          SliverPersistentHeader(
-            pinned: true,
-            delegate: FilterBarDelegate<_RewardFilter>(
-              values: _RewardFilter.values,
-              selected: _filter,
-              labelOf: (filter) => filter.label,
-              countOf: _countOf,
-              onSelected: (filter) => setState(() => _filter = filter),
-            ),
-          ),
-          if (visible.isEmpty)
-            SliverFillRemaining(hasScrollBody: false, child: _buildEmpty())
-          else
-            SliverPadding(
-              padding: const EdgeInsets.fromLTRB(16, 4, 16, 32),
-              sliver: SliverList.separated(
-                itemCount: visible.length,
-                separatorBuilder: (_, _) => const SizedBox(height: 12),
-                itemBuilder: (context, index) {
-                  final reward = visible[index];
-                  return RewardCard(
-                    reward: reward,
-                    onTap: () => RewardDetailSheet.show(context, reward),
-                  );
-                },
-              ),
-            ),
+      appBar: AppBar(
+        title: const Text('EnakReward'),
+        bottom: TabBar(
+          controller: _tabController,
+          tabs: const [
+            Tab(text: 'Tukar voucher'),
+            Tab(text: 'Voucher saya'),
+          ],
+        ),
+      ),
+      body: TabBarView(
+        controller: _tabController,
+        children: [
+          _CatalogTab(onOpen: _openDetail),
+          _RedemptionTab(onBrowse: () => _tabController.animateTo(0)),
         ],
       ),
     );
   }
+}
 
-  Widget _buildSummary() {
-    final active = _activeRewards;
-    // Sudah terurut: yang pertama adalah yang paling cepat berakhir.
-    final expiringSoon = active.where(isRewardExpiringSoon).firstOrNull;
+class _CatalogTab extends StatelessWidget {
+  const _CatalogTab({required this.onOpen});
+
+  final ValueChanged<Voucher> onOpen;
+
+  Future<void> _onRefresh(BuildContext context) async {
+    context.read<WalletLoaderBloc>().add(const WalletLoaderEvent.fetched());
+    final bloc = context.read<VoucherLoaderBloc>();
+    bloc.add(const VoucherLoaderEvent.fetched());
+    await bloc.stream.firstWhere((s) => !s.isFetching);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocBuilder<VoucherLoaderBloc, VoucherLoaderState>(
+      builder: (context, state) {
+        if (!state.hasLoaded) {
+          return state.failureOption.fold(
+            () => const Center(
+              child: SpinKitFadingCircle(color: AppColor.primary, size: 36),
+            ),
+            (f) => _ErrorView(
+              message: walletFailureMessage(f),
+              onRetry: () => context.read<VoucherLoaderBloc>().add(
+                const VoucherLoaderEvent.fetched(),
+              ),
+            ),
+          );
+        }
+
+        return BlocBuilder<WalletLoaderBloc, WalletLoaderState>(
+          builder: (context, walletState) => RefreshIndicator(
+            color: AppColor.primary,
+            onRefresh: () => _onRefresh(context),
+            child: ListView(
+              padding: const EdgeInsets.fromLTRB(16, 16, 16, 32),
+              children: [
+                _PointBalanceCard(walletState: walletState),
+                const SizedBox(height: 16),
+                if (state.vouchers.isEmpty)
+                  const _EmptyView(
+                    icon: Icons.confirmation_number_outlined,
+                    message: 'Belum ada voucher yang bisa ditukar',
+                  )
+                else
+                  ...state.vouchers.map(
+                    (voucher) => Padding(
+                      padding: const EdgeInsets.only(bottom: 12),
+                      child: VoucherCard(
+                        voucher: voucher,
+                        canAfford:
+                            !walletState.hasLoaded ||
+                            walletState.summary.pointBalance >=
+                                voucher.pointCost,
+                        onTap: () => onOpen(voucher),
+                      ),
+                    ),
+                  ),
+              ],
+            ),
+          ),
+        );
+      },
+    );
+  }
+}
+
+class _RedemptionTab extends StatelessWidget {
+  const _RedemptionTab({required this.onBrowse});
+
+  final VoidCallback onBrowse;
+
+  Future<void> _onRefresh(BuildContext context) async {
+    final bloc = context.read<VoucherRedemptionLoaderBloc>();
+    bloc.add(const VoucherRedemptionLoaderEvent.refreshed());
+    await bloc.stream.firstWhere((s) => !s.isFetching);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocConsumer<
+      VoucherRedemptionLoaderBloc,
+      VoucherRedemptionLoaderState
+    >(
+      listenWhen: (p, c) =>
+          p.failureOption != c.failureOption && c.items.isNotEmpty,
+      listener: (context, state) => state.failureOption.fold(
+        () {},
+        (f) => AppFlushbar.showError(context, walletFailureMessage(f)),
+      ),
+      builder: (context, state) {
+        if (!state.hasLoaded) {
+          return state.failureOption.fold(
+            () => const Center(
+              child: SpinKitFadingCircle(color: AppColor.primary, size: 36),
+            ),
+            (f) => _ErrorView(
+              message: walletFailureMessage(f),
+              onRetry: () => context.read<VoucherRedemptionLoaderBloc>().add(
+                const VoucherRedemptionLoaderEvent.refreshed(),
+              ),
+            ),
+          );
+        }
+
+        return RefreshIndicator(
+          color: AppColor.primary,
+          onRefresh: () => _onRefresh(context),
+          child: NotificationListener<ScrollNotification>(
+            onNotification: (notification) {
+              final metrics = notification.metrics;
+              if (metrics.pixels >= metrics.maxScrollExtent - 200) {
+                context.read<VoucherRedemptionLoaderBloc>().add(
+                  const VoucherRedemptionLoaderEvent.loadedMore(),
+                );
+              }
+              return false;
+            },
+            child: state.items.isEmpty
+                ? ListView(
+                    padding: const EdgeInsets.all(16),
+                    children: [
+                      _EmptyView(
+                        icon: Icons.local_activity_outlined,
+                        message: 'Belum ada voucher',
+                        actionLabel: 'Tukar EnakPoint sekarang',
+                        onAction: onBrowse,
+                      ),
+                    ],
+                  )
+                : ListView.separated(
+                    padding: const EdgeInsets.fromLTRB(16, 16, 16, 32),
+                    itemCount: state.items.length + (state.hasMore ? 1 : 0),
+                    separatorBuilder: (_, _) => const SizedBox(height: 12),
+                    itemBuilder: (context, index) {
+                      if (index >= state.items.length) {
+                        return const Padding(
+                          padding: EdgeInsets.all(16),
+                          child: Center(
+                            child: SpinKitFadingCircle(
+                              color: AppColor.primary,
+                              size: 24,
+                            ),
+                          ),
+                        );
+                      }
+                      final redemption = state.items[index];
+                      return RedemptionCard(
+                        redemption: redemption,
+                        onTap: () =>
+                            RedemptionDetailSheet.show(context, redemption),
+                      );
+                    },
+                  ),
+          ),
+        );
+      },
+    );
+  }
+}
+
+/// Saldo EnakPoint, selalu "setara potongan", tidak pernah "saldo Rp".
+class _PointBalanceCard extends StatelessWidget {
+  const _PointBalanceCard({required this.walletState});
+
+  final WalletLoaderState walletState;
+
+  @override
+  Widget build(BuildContext context) {
+    final summary = walletState.summary;
 
     return Container(
-      margin: const EdgeInsets.fromLTRB(16, 16, 16, 4),
       padding: const EdgeInsets.all(16),
       decoration: BoxDecoration(
         gradient: const LinearGradient(
@@ -111,183 +284,90 @@ class _RewardPageState extends State<RewardPage> {
           end: Alignment.bottomRight,
         ),
         borderRadius: BorderRadius.circular(16),
-        boxShadow: [
-          BoxShadow(
-            color: AppColor.primary.withOpacity(0.3),
-            blurRadius: 12,
-            offset: const Offset(0, 6),
-          ),
-        ],
       ),
-      child: Column(
+      child: Row(
         children: [
-          Row(
-            children: [
-              Container(
-                width: 48,
-                height: 48,
-                padding: const EdgeInsets.all(8),
-                decoration: const BoxDecoration(
-                  color: AppColor.white,
-                  shape: BoxShape.circle,
-                ),
-                child: Assets.icons.enakrewardIcon.image(
-                  fit: BoxFit.contain,
-                  // Aset aslinya besar; decode seukuran tampilan saja.
-                  cacheWidth: (32 * MediaQuery.devicePixelRatioOf(context))
-                      .round(),
-                ),
-              ),
-              const SizedBox(width: 12),
-              Expanded(
-                child: Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  children: [
-                    Text(
-                      'Siap dipakai',
-                      style: AppStyle.sm.copyWith(
-                        color: AppColor.textWhite.withOpacity(0.9),
-                      ),
-                    ),
-                    FittedBox(
-                      fit: BoxFit.scaleDown,
-                      alignment: Alignment.centerLeft,
-                      child: Text(
-                        '${active.length} reward',
-                        style: AppStyle.h5.copyWith(
-                          color: AppColor.textWhite,
-                          fontWeight: FontWeight.w700,
-                        ),
-                      ),
-                    ),
-                  ],
-                ),
-              ),
-              Material(
-                color: AppColor.white,
-                borderRadius: BorderRadius.circular(20),
-                child: InkWell(
-                  borderRadius: BorderRadius.circular(20),
-                  onTap: () => context.router.push(const CoinRoute()),
-                  child: Padding(
-                    padding: const EdgeInsets.symmetric(
-                      horizontal: 14,
-                      vertical: 8,
-                    ),
-                    child: Text(
-                      'Tukar Poin',
-                      style: AppStyle.sm.copyWith(
-                        color: AppColor.primary,
-                        fontWeight: FontWeight.w700,
-                      ),
-                    ),
-                  ),
-                ),
-              ),
-            ],
-          ),
-          if (expiringSoon != null) ...[
-            const SizedBox(height: 14),
-            Material(
-              color: AppColor.white.withOpacity(0.15),
-              borderRadius: BorderRadius.circular(10),
-              child: InkWell(
-                borderRadius: BorderRadius.circular(10),
-                onTap: () => RewardDetailSheet.show(context, expiringSoon),
-                child: Padding(
-                  padding: const EdgeInsets.symmetric(
-                    horizontal: 12,
-                    vertical: 10,
-                  ),
-                  child: Row(
-                    children: [
-                      const Icon(
-                        Icons.schedule,
-                        size: 16,
-                        color: AppColor.textWhite,
-                      ),
-                      const SizedBox(width: 8),
-                      Expanded(
-                        child: Text(
-                          '${expiringSoon.name} · '
-                          '${rewardValidityLabel(expiringSoon).toLowerCase()}',
-                          maxLines: 1,
-                          overflow: TextOverflow.ellipsis,
-                          style: AppStyle.sm.copyWith(
-                            color: AppColor.textWhite,
-                            fontWeight: FontWeight.w600,
-                          ),
-                        ),
-                      ),
-                      const Icon(
-                        Icons.chevron_right,
-                        size: 18,
-                        color: AppColor.textWhite,
-                      ),
-                    ],
-                  ),
-                ),
-              ),
+          Container(
+            width: 44,
+            height: 44,
+            padding: const EdgeInsets.all(6),
+            decoration: const BoxDecoration(
+              color: AppColor.white,
+              shape: BoxShape.circle,
             ),
-          ],
+            child: const WalletCurrencyIcon(
+              currency: WalletCurrency.point,
+              size: 32,
+            ),
+          ),
+          const SizedBox(width: 12),
+          Expanded(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Text(
+                  'EnakPoint kamu',
+                  style: AppStyle.sm.copyWith(
+                    color: AppColor.textWhite.withOpacity(0.9),
+                  ),
+                ),
+                Text(
+                  walletState.hasLoaded
+                      ? summary.pointBalance.thousandFormat
+                      : '…',
+                  style: AppStyle.h5.copyWith(
+                    color: AppColor.textWhite,
+                    fontWeight: FontWeight.w700,
+                  ),
+                ),
+                if (walletState.hasLoaded)
+                  Text(
+                    pointDiscountLabel(summary.pointDiscountValue),
+                    style: AppStyle.xs.copyWith(
+                      color: AppColor.textWhite.withOpacity(0.9),
+                    ),
+                  ),
+              ],
+            ),
+          ),
         ],
       ),
     );
   }
+}
 
-  Widget _buildEmpty() {
-    final (String emoji, String message) = switch (_filter) {
-      _RewardFilter.all => ('🎁', 'Belum ada reward'),
-      _RewardFilter.active => ('🎯', 'Belum ada reward aktif'),
-      _RewardFilter.used => ('✅', 'Belum ada reward yang dipakai'),
-      _RewardFilter.expired => ('⏰', 'Tidak ada reward yang kedaluwarsa'),
-    };
+class _EmptyView extends StatelessWidget {
+  const _EmptyView({
+    required this.icon,
+    required this.message,
+    this.actionLabel,
+    this.onAction,
+  });
 
+  final IconData icon;
+  final String message;
+  final String? actionLabel;
+  final VoidCallback? onAction;
+
+  @override
+  Widget build(BuildContext context) {
     return Padding(
-      padding: const EdgeInsets.fromLTRB(32, 32, 32, 64),
+      padding: const EdgeInsets.only(top: 48),
       child: Column(
-        mainAxisAlignment: MainAxisAlignment.center,
         children: [
-          Container(
-            width: 96,
-            height: 96,
-            alignment: Alignment.center,
-            decoration: BoxDecoration(
-              color: AppColor.primary.withOpacity(0.06),
-              shape: BoxShape.circle,
-            ),
-            child: Text(emoji, style: const TextStyle(fontSize: 44)),
-          ),
-          const SizedBox(height: 16),
+          Icon(icon, size: 56, color: AppColor.textLight),
+          const SizedBox(height: 12),
           Text(
             message,
             textAlign: TextAlign.center,
-            style: AppStyle.lg.copyWith(fontWeight: FontWeight.w700),
+            style: AppStyle.md.copyWith(color: AppColor.textSecondary),
           ),
-          const SizedBox(height: 6),
-          Text(
-            'Tukar poin kamu untuk mendapatkan reward menarik',
-            textAlign: TextAlign.center,
-            style: AppStyle.sm.copyWith(color: AppColor.textSecondary),
-          ),
-          if (_filter == _RewardFilter.all ||
-              _filter == _RewardFilter.active) ...[
-            const SizedBox(height: 20),
-            ElevatedButton(
-              onPressed: () => context.router.push(const CoinRoute()),
-              style: ElevatedButton.styleFrom(
-                padding: const EdgeInsets.symmetric(
-                  horizontal: 24,
-                  vertical: 12,
-                ),
-              ),
-              child: Text(
-                'Tukar Poin Sekarang',
-                style: AppStyle.sm.copyWith(
-                  color: AppColor.white,
-                  fontWeight: FontWeight.w700,
-                ),
-              ),
+          if (actionLabel != null) ...[
+            const SizedBox(height: 16),
+            AppOutlineButton(
+              title: actionLabel!,
+              width: 220,
+              onPressed: onAction,
             ),
           ],
         ],
@@ -295,3 +375,31 @@ class _RewardPageState extends State<RewardPage> {
     );
   }
 }
+
+class _ErrorView extends StatelessWidget {
+  const _ErrorView({required this.message, required this.onRetry});
+
+  final String message;
+  final VoidCallback onRetry;
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: Padding(
+        padding: const EdgeInsets.all(24),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Text(message, style: AppStyle.md, textAlign: TextAlign.center),
+            const SizedBox(height: 16),
+            AppOutlineButton(
+              title: 'Coba lagi',
+              width: 160,
+              onPressed: onRetry,
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/presentation/pages/reward/reward_ui.dart

@@ -1,60 +1,50 @@
+import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
-import 'package:intl/intl.dart';
+import 'package:flutter/services.dart';
 
+import '../../../common/extension/extension.dart';
 import '../../../common/theme/theme.dart';
-import '../../../sample/reward_sample_data.dart';
+import '../../../common/ui/painter/dashed_line_painter.dart';
+import '../../../domain/wallet/wallet.dart';
+import '../../components/toast/flushbar.dart';
+import '../wallet/wallet_ui.dart';
 
-/// Reward aktif dengan sisa masa berlaku segini dianggap segera berakhir.
-const int rewardExpiringSoonDays = 7;
+/// Label jenis voucher (§9.1).
+String voucherTypeLabel(VoucherType type, int faceValue) => switch (type) {
+  VoucherType.fixedValue => 'Potongan ${faceValue.currencyFormatRp}',
+  VoucherType.percentage => 'Potongan persen',
+  VoucherType.freeItem => 'Gratis item',
+  VoucherType.merchantBenefit => 'Benefit merchant',
+  VoucherType.unknown => 'Voucher',
+};
 
-extension RewardStatusUi on RewardStatus {
+/// "senilai Rp 20.000". `null` untuk potongan nominal, karena nilainya sudah
+/// ada di [voucherTypeLabel], dan bila server tidak mengirim nilai.
+String? voucherFaceValueLabel(VoucherType type, int faceValue) =>
+    type == VoucherType.fixedValue || faceValue <= 0
+    ? null
+    : 'senilai ${faceValue.currencyFormatRp}';
+
+extension VoucherRedemptionStatusUi on VoucherRedemptionStatus {
   String get label => switch (this) {
-    RewardStatus.active => 'Aktif',
-    RewardStatus.used => 'Terpakai',
-    RewardStatus.expired => 'Kedaluwarsa',
+    VoucherRedemptionStatus.completed => 'Siap dipakai',
+    VoucherRedemptionStatus.pending => 'Sedang diproses',
+    VoucherRedemptionStatus.failed => 'Gagal',
+    VoucherRedemptionStatus.unknown => '',
   };
 
   Color get color => switch (this) {
-    RewardStatus.active => AppColor.success,
-    RewardStatus.used => AppColor.textSecondary,
-    RewardStatus.expired => AppColor.error,
+    VoucherRedemptionStatus.completed => AppColor.success,
+    VoucherRedemptionStatus.pending => AppColor.warning,
+    VoucherRedemptionStatus.failed => AppColor.error,
+    VoucherRedemptionStatus.unknown => AppColor.textSecondary,
   };
 }
 
-/// Tanggal pendek: "1 Okt 2026".
-String formatRewardDate(DateTime date) =>
-    DateFormat('d MMM yyyy', 'id_ID').format(date);
+class VoucherRedemptionStatusBadge extends StatelessWidget {
+  const VoucherRedemptionStatusBadge({super.key, required this.status});
 
-/// Sisa hari kalender sampai [Reward.validUntil]; 0 berarti berakhir hari ini.
-int rewardDaysLeft(Reward reward) {
-  final now = DateTime.now();
-  final today = DateTime(now.year, now.month, now.day);
-  final end = DateTime(
-    reward.validUntil.year,
-    reward.validUntil.month,
-    reward.validUntil.day,
-  );
-  return end.difference(today).inDays;
-}
-
-bool isRewardExpiringSoon(Reward reward) =>
-    reward.status == RewardStatus.active &&
-    rewardDaysLeft(reward) <= rewardExpiringSoonDays;
-
-/// "Berakhir hari ini" / "Berakhir 3 hari lagi" / "Berlaku s/d 25 Okt 2026".
-String rewardValidityLabel(Reward reward) {
-  final daysLeft = rewardDaysLeft(reward);
-  if (daysLeft <= 0) return 'Berakhir hari ini';
-  if (daysLeft <= rewardExpiringSoonDays) {
-    return 'Berakhir $daysLeft hari lagi';
-  }
-  return 'Berlaku s/d ${formatRewardDate(reward.validUntil)}';
-}
-
-class RewardStatusBadge extends StatelessWidget {
-  const RewardStatusBadge({super.key, required this.status});
-
-  final RewardStatus status;
+  final VoucherRedemptionStatus status;
 
   @override
   Widget build(BuildContext context) {
@@ -75,13 +65,62 @@ class RewardStatusBadge extends StatelessWidget {
   }
 }
 
-/// Emoji reward; abu-abu untuk reward yang sudah tidak bisa dipakai.
-class RewardEmoji extends StatelessWidget {
-  const RewardEmoji({super.key, required this.reward, required this.size});
+/// Pesan untuk penolakan tukar voucher (§9.2). `cause` dari server berbahasa
+/// Inggris dan tidak ditampilkan mentah. [reloadCatalog] menandai voucher yang
+/// sudah tidak tersedia, sehingga katalog perlu dimuat ulang.
+({String message, bool reloadCatalog}) describeVoucherRedeemFailure(
+  WalletFailure failure,
+) {
+  final cause = failure.maybeMap(
+    rejected: (value) => value.cause.toLowerCase(),
+    orElse: () => null,
+  );
+  if (cause == null) {
+    return (message: walletFailureMessage(failure), reloadCatalog: false);
+  }
 
-  final Reward reward;
+  if (cause.contains('not enough enakpoint')) {
+    return (message: 'EnakPoint kamu kurang.', reloadCatalog: false);
+  }
+  if (cause.contains('out of stock')) {
+    return (message: 'Voucher sudah habis.', reloadCatalog: true);
+  }
+  if (cause.contains('per customer')) {
+    return (
+      message: 'Kamu sudah mencapai batas penukaran voucher ini.',
+      reloadCatalog: false,
+    );
+  }
+  if (cause.contains('customer is not active')) {
+    return (message: 'Akun tidak aktif.', reloadCatalog: false);
+  }
+  if (cause.contains('not available') ||
+      cause.contains('cannot be redeemed yet') ||
+      cause.contains('has ended')) {
+    return (message: 'Voucher tidak tersedia.', reloadCatalog: true);
+  }
+  // Termasuk Idempotency-Key yang terpakai untuk voucher lain (bug di app).
+  return (
+    message: 'Penukaran voucher tidak bisa diproses.',
+    reloadCatalog: false,
+  );
+}
+
+/// Gambar voucher dari `image_url`; ikon tiket bila kosong.
+class VoucherImage extends StatelessWidget {
+  const VoucherImage({
+    super.key,
+    required this.url,
+    required this.size,
+    this.dimmed = false,
+  });
+
+  final String? url;
   final double size;
 
+  /// Abu-abu untuk voucher yang tidak bisa ditukar / dipakai.
+  final bool dimmed;
+
   static const ColorFilter _greyscale = ColorFilter.matrix([
     0.2126, 0.7152, 0.0722, 0, 0, //
     0.2126, 0.7152, 0.0722, 0, 0, //
@@ -91,8 +130,126 @@ class RewardEmoji extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final emoji = Text(reward.emoji, style: TextStyle(fontSize: size));
-    if (reward.status == RewardStatus.active) return emoji;
-    return ColorFiltered(colorFilter: _greyscale, child: emoji);
+    final fallback = SizedBox(
+      width: size,
+      height: size,
+      child: Icon(
+        Icons.confirmation_number_outlined,
+        size: size * 0.7,
+        color: dimmed ? AppColor.textLight : AppColor.primary,
+      ),
+    );
+
+    final image = url == null
+        ? fallback
+        : ClipRRect(
+            borderRadius: BorderRadius.circular(8),
+            child: CachedNetworkImage(
+              imageUrl: url!,
+              width: size,
+              height: size,
+              fit: BoxFit.cover,
+              placeholder: (_, _) => SizedBox(width: size, height: size),
+              errorWidget: (_, _, _) => fallback,
+            ),
+          );
+
+    if (!dimmed || url == null) return image;
+    return ColorFiltered(colorFilter: _greyscale, child: image);
+  }
+}
+
+/// Kode voucher yang bisa disalin. Customer menunjukkan layar ini ke kasir.
+class VoucherCodeBox extends StatelessWidget {
+  const VoucherCodeBox({super.key, required this.code});
+
+  final String code;
+
+  Future<void> _copy(BuildContext context) async {
+    await Clipboard.setData(ClipboardData(text: code));
+    if (!context.mounted) return;
+    AppFlushbar.showSuccess(context, 'Kode voucher disalin');
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.fromLTRB(16, 14, 8, 8),
+      decoration: BoxDecoration(
+        border: Border.all(color: AppColor.border),
+        borderRadius: BorderRadius.circular(16),
+      ),
+      child: Column(
+        children: [
+          Text(
+            'Tunjukkan kode ini ke kasir',
+            style: AppStyle.sm.copyWith(color: AppColor.textSecondary),
+          ),
+          const SizedBox(height: 10),
+          CustomPaint(
+            size: const Size(double.infinity, 1),
+            painter: DashedLinePainter(),
+          ),
+          const SizedBox(height: 4),
+          Row(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              Flexible(
+                child: SelectableText(
+                  code,
+                  textAlign: TextAlign.center,
+                  style: AppStyle.xl.copyWith(
+                    fontWeight: FontWeight.w700,
+                    letterSpacing: 2,
+                  ),
+                ),
+              ),
+              IconButton(
+                onPressed: () => _copy(context),
+                tooltip: 'Salin kode',
+                icon: const Icon(
+                  Icons.copy_rounded,
+                  size: 20,
+                  color: AppColor.primary,
+                ),
+              ),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+/// Catatan untuk voucher tanpa kode (`code` null): customer menunjukkan layar
+/// voucher ke kasir.
+class VoucherNoCodeNote extends StatelessWidget {
+  const VoucherNoCodeNote({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.all(14),
+      decoration: BoxDecoration(
+        color: AppColor.successWithOpacity(0.08),
+        borderRadius: BorderRadius.circular(AppValue.borderRadius),
+      ),
+      child: Row(
+        children: [
+          const Icon(
+            Icons.storefront_outlined,
+            size: 20,
+            color: AppColor.success,
+          ),
+          const SizedBox(width: 10),
+          Expanded(
+            child: Text(
+              'Voucher ini tidak memakai kode. Tunjukkan layar ini ke kasir.',
+              style: AppStyle.sm,
+            ),
+          ),
+        ],
+      ),
+    );
   }
 }

lib/presentation/pages/reward/widgets/redemption_card.dart

@@ -0,0 +1,133 @@
+import 'package:flutter/material.dart';
+
+import '../../../../common/extension/extension.dart';
+import '../../../../common/theme/theme.dart';
+import '../../../../domain/wallet/wallet.dart';
+import '../../wallet/wallet_ui.dart';
+import '../reward_ui.dart';
+import 'ticket_card.dart';
+
+/// Satu voucher di "Voucher saya" (§9.3).
+class RedemptionCard extends StatelessWidget {
+  const RedemptionCard({
+    super.key,
+    required this.redemption,
+    required this.onTap,
+  });
+
+  final VoucherRedemption redemption;
+  final VoidCallback onTap;
+
+  bool get _isReady => redemption.status == VoucherRedemptionStatus.completed;
+
+  @override
+  Widget build(BuildContext context) {
+    final status = redemption.status;
+
+    return TicketCard(
+      active: _isReady,
+      onTap: onTap,
+      stub: TicketStub(
+        image: VoucherImage(
+          url: redemption.voucherImageUrl,
+          size: 44,
+          dimmed: !_isReady,
+        ),
+        pointCost: redemption.pointCost.thousandFormat,
+        active: _isReady,
+      ),
+      body: Padding(
+        padding: const EdgeInsets.fromLTRB(14, 12, 14, 12),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Row(
+              children: [
+                Expanded(
+                  child: Text(
+                    voucherTypeLabel(
+                      redemption.voucherType,
+                      redemption.faceValue,
+                    ).toUpperCase(),
+                    style: AppStyle.xs.copyWith(
+                      color: AppColor.textSecondary,
+                      fontWeight: FontWeight.w700,
+                      letterSpacing: 0.6,
+                    ),
+                  ),
+                ),
+                if (status != VoucherRedemptionStatus.unknown)
+                  VoucherRedemptionStatusBadge(status: status),
+              ],
+            ),
+            const SizedBox(height: 4),
+            Text(
+              redemption.voucherName,
+              maxLines: 2,
+              overflow: TextOverflow.ellipsis,
+              style: AppStyle.lg.copyWith(
+                color: _isReady ? AppColor.textPrimary : AppColor.textSecondary,
+                fontWeight: FontWeight.w700,
+              ),
+            ),
+            if (_isReady && redemption.code != null) ...[
+              const SizedBox(height: 2),
+              Text(
+                redemption.code!,
+                style: AppStyle.sm.copyWith(
+                  fontWeight: FontWeight.w700,
+                  letterSpacing: 1,
+                ),
+              ),
+            ],
+            const SizedBox(height: 8),
+            _buildFootnote(),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _buildFootnote() {
+    final (IconData icon, String text) = switch (redemption.status) {
+      VoucherRedemptionStatus.completed => (
+        Icons.schedule,
+        redemption.codeExpiresAt == null
+            ? 'Tunjukkan ke kasir'
+            : 'Berlaku sampai ${formatWibDate(redemption.codeExpiresAt!)}',
+      ),
+      VoucherRedemptionStatus.pending => (
+        Icons.hourglass_top_rounded,
+        'Voucher sedang diproses',
+      ),
+      VoucherRedemptionStatus.failed => (
+        Icons.undo_rounded,
+        'EnakPoint sudah dikembalikan',
+      ),
+      VoucherRedemptionStatus.unknown => (
+        Icons.info_outline,
+        redemption.createdAt == null
+            ? ''
+            : 'Ditukar ${formatWibDate(redemption.createdAt!)}',
+      ),
+    };
+
+    return Row(
+      children: [
+        Icon(icon, size: 14, color: AppColor.textSecondary),
+        const SizedBox(width: 4),
+        Expanded(
+          child: Text(
+            text,
+            maxLines: 2,
+            overflow: TextOverflow.ellipsis,
+            style: AppStyle.xs.copyWith(
+              color: AppColor.textSecondary,
+              fontWeight: FontWeight.w600,
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}

lib/presentation/pages/reward/widgets/redemption_detail_sheet.dart

@@ -0,0 +1,210 @@
+import 'package:flutter/material.dart';
+
+import '../../../../common/extension/extension.dart';
+import '../../../../common/theme/theme.dart';
+import '../../../../domain/wallet/wallet.dart';
+import '../../wallet/wallet_ui.dart';
+import '../reward_ui.dart';
+
+/// Detail voucher milik customer. Untuk memakai voucher, customer
+/// menunjukkan layar ini ke kasir; POS belum bisa menandai voucher terpakai.
+class RedemptionDetailSheet extends StatelessWidget {
+  const RedemptionDetailSheet({super.key, required this.redemption});
+
+  final VoucherRedemption redemption;
+
+  static Future<void> show(BuildContext context, VoucherRedemption redemption) {
+    return showModalBottomSheet<void>(
+      context: context,
+      isScrollControlled: true,
+      backgroundColor: AppColor.white,
+      shape: const RoundedRectangleBorder(
+        borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
+      ),
+      builder: (_) => RedemptionDetailSheet(redemption: redemption),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final faceValue = voucherFaceValueLabel(
+      redemption.voucherType,
+      redemption.faceValue,
+    );
+
+    return ConstrainedBox(
+      constraints: BoxConstraints(
+        maxHeight: MediaQuery.sizeOf(context).height * 0.85,
+      ),
+      child: SafeArea(
+        top: false,
+        child: SingleChildScrollView(
+          padding: const EdgeInsets.fromLTRB(20, 12, 20, 20),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.stretch,
+            children: [
+              Center(
+                child: Container(
+                  width: 40,
+                  height: 4,
+                  decoration: BoxDecoration(
+                    color: AppColor.border,
+                    borderRadius: BorderRadius.circular(2),
+                  ),
+                ),
+              ),
+              const SizedBox(height: 20),
+              _buildHeader(),
+              const SizedBox(height: 20),
+              _buildStatusContent(),
+              const SizedBox(height: 20),
+              if (redemption.createdAt != null)
+                _InfoRow(
+                  label: 'Ditukar pada',
+                  value: formatWibDateTime(redemption.createdAt!),
+                ),
+              if (redemption.status == VoucherRedemptionStatus.completed &&
+                  redemption.codeExpiresAt != null)
+                _InfoRow(
+                  label: 'Berlaku sampai',
+                  value: formatWibDateTime(redemption.codeExpiresAt!),
+                ),
+              _InfoRow(
+                label: 'EnakPoint ditukar',
+                value: redemption.pointCost.thousandFormat,
+              ),
+              if (faceValue != null)
+                _InfoRow(label: 'Nilai voucher', value: faceValue),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _buildHeader() {
+    final status = redemption.status;
+    return Row(
+      children: [
+        Container(
+          width: 56,
+          height: 56,
+          alignment: Alignment.center,
+          decoration: BoxDecoration(
+            color: AppColor.primary.withOpacity(0.06),
+            borderRadius: BorderRadius.circular(14),
+          ),
+          child: VoucherImage(url: redemption.voucherImageUrl, size: 40),
+        ),
+        const SizedBox(width: 12),
+        Expanded(
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Text(
+                voucherTypeLabel(
+                  redemption.voucherType,
+                  redemption.faceValue,
+                ).toUpperCase(),
+                style: AppStyle.xs.copyWith(
+                  color: AppColor.textSecondary,
+                  fontWeight: FontWeight.w700,
+                  letterSpacing: 0.6,
+                ),
+              ),
+              const SizedBox(height: 2),
+              Text(
+                redemption.voucherName,
+                style: AppStyle.xl.copyWith(fontWeight: FontWeight.w700),
+              ),
+            ],
+          ),
+        ),
+        if (status != VoucherRedemptionStatus.unknown) ...[
+          const SizedBox(width: 8),
+          VoucherRedemptionStatusBadge(status: status),
+        ],
+      ],
+    );
+  }
+
+  Widget _buildStatusContent() {
+    switch (redemption.status) {
+      case VoucherRedemptionStatus.completed:
+        return redemption.code == null
+            ? const VoucherNoCodeNote()
+            : VoucherCodeBox(code: redemption.code!);
+      case VoucherRedemptionStatus.pending:
+        return const _Note(
+          icon: Icons.hourglass_top_rounded,
+          color: AppColor.warning,
+          message:
+              'Voucher sedang diproses. EnakPoint sudah terpotong; cek lagi '
+              'nanti.',
+        );
+      case VoucherRedemptionStatus.failed:
+        return const _Note(
+          icon: Icons.undo_rounded,
+          color: AppColor.error,
+          message: 'Gagal, EnakPoint sudah dikembalikan.',
+        );
+      case VoucherRedemptionStatus.unknown:
+        return const SizedBox.shrink();
+    }
+  }
+}
+
+class _Note extends StatelessWidget {
+  const _Note({required this.icon, required this.color, required this.message});
+
+  final IconData icon;
+  final Color color;
+  final String message;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.all(14),
+      decoration: BoxDecoration(
+        color: AppColor.background,
+        borderRadius: BorderRadius.circular(AppValue.borderRadius),
+      ),
+      child: Row(
+        children: [
+          Icon(icon, size: 20, color: color),
+          const SizedBox(width: 10),
+          Expanded(
+            child: Text(
+              message,
+              style: AppStyle.sm.copyWith(color: AppColor.textSecondary),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _InfoRow extends StatelessWidget {
+  const _InfoRow({required this.label, required this.value});
+
+  final String label;
+  final String value;
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(vertical: 6),
+      child: Row(
+        children: [
+          Text(
+            label,
+            style: AppStyle.sm.copyWith(color: AppColor.textSecondary),
+          ),
+          const Spacer(),
+          Text(value, style: AppStyle.sm.copyWith(fontWeight: FontWeight.w600)),
+        ],
+      ),
+    );
+  }
+}

lib/presentation/pages/reward/widgets/reward_card.dart

@@ -1,249 +0,0 @@
-import 'package:flutter/material.dart';
-
-import '../../../../common/extension/extension.dart';
-import '../../../../common/theme/theme.dart';
-import '../../../../sample/reward_sample_data.dart';
-import '../reward_ui.dart';
-
-/// Kartu reward berbentuk tiket: sobekan kiri (emoji + poin) dan isi kanan.
-class RewardCard extends StatelessWidget {
-  const RewardCard({super.key, required this.reward, required this.onTap});
-
-  final Reward reward;
-  final VoidCallback onTap;
-
-  static const double _stubWidth = 84;
-
-  bool get _isActive => reward.status == RewardStatus.active;
-
-  @override
-  Widget build(BuildContext context) {
-    return PhysicalShape(
-      clipper: const _TicketClipper(notchX: _stubWidth + 0.5),
-      color: AppColor.white,
-      elevation: 2,
-      shadowColor: Colors.black.withOpacity(0.25),
-      child: Material(
-        type: MaterialType.transparency,
-        child: InkWell(
-          onTap: onTap,
-          child: IntrinsicHeight(
-            child: Row(
-              crossAxisAlignment: CrossAxisAlignment.stretch,
-              children: [
-                _buildStub(),
-                const Padding(
-                  padding: EdgeInsets.symmetric(vertical: 14),
-                  child: CustomPaint(
-                    size: Size(1, double.infinity),
-                    painter: _VerticalDashPainter(),
-                  ),
-                ),
-                Expanded(child: _buildBody()),
-              ],
-            ),
-          ),
-        ),
-      ),
-    );
-  }
-
-  Widget _buildStub() {
-    return Container(
-      width: _stubWidth,
-      color: _isActive
-          ? AppColor.primary.withOpacity(0.06)
-          : AppColor.background,
-      padding: const EdgeInsets.symmetric(vertical: 16),
-      child: Column(
-        mainAxisAlignment: MainAxisAlignment.center,
-        children: [
-          RewardEmoji(reward: reward, size: 34),
-          const SizedBox(height: 8),
-          Text(
-            reward.pointsUsed.thousandFormat,
-            style: AppStyle.md.copyWith(
-              color: _isActive ? AppColor.primary : AppColor.textSecondary,
-              fontWeight: FontWeight.w700,
-            ),
-          ),
-          Text(
-            'poin',
-            style: AppStyle.xs.copyWith(color: AppColor.textSecondary),
-          ),
-        ],
-      ),
-    );
-  }
-
-  Widget _buildBody() {
-    return Padding(
-      padding: const EdgeInsets.fromLTRB(14, 12, 14, 12),
-      child: Column(
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
-          Row(
-            children: [
-              Expanded(
-                child: Text(
-                  reward.categoryName.toUpperCase(),
-                  style: AppStyle.xs.copyWith(
-                    color: AppColor.textSecondary,
-                    fontWeight: FontWeight.w700,
-                    letterSpacing: 0.6,
-                  ),
-                ),
-              ),
-              RewardStatusBadge(status: reward.status),
-            ],
-          ),
-          const SizedBox(height: 4),
-          Text(
-            reward.name,
-            maxLines: 1,
-            overflow: TextOverflow.ellipsis,
-            style: AppStyle.lg.copyWith(
-              color: _isActive ? AppColor.textPrimary : AppColor.textSecondary,
-              fontWeight: FontWeight.w700,
-            ),
-          ),
-          const SizedBox(height: 2),
-          Text(
-            reward.description,
-            maxLines: 1,
-            overflow: TextOverflow.ellipsis,
-            style: AppStyle.sm.copyWith(color: AppColor.textSecondary),
-          ),
-          const SizedBox(height: 10),
-          Row(
-            children: [
-              Expanded(child: _buildFootnote()),
-              if (_isActive) ...[
-                const SizedBox(width: 8),
-                Container(
-                  padding: const EdgeInsets.symmetric(
-                    horizontal: 14,
-                    vertical: 6,
-                  ),
-                  decoration: BoxDecoration(
-                    color: AppColor.primary,
-                    borderRadius: BorderRadius.circular(20),
-                  ),
-                  child: Text(
-                    'Pakai',
-                    style: AppStyle.sm.copyWith(
-                      color: AppColor.white,
-                      fontWeight: FontWeight.w700,
-                    ),
-                  ),
-                ),
-              ],
-            ],
-          ),
-        ],
-      ),
-    );
-  }
-
-  Widget _buildFootnote() {
-    final (IconData icon, String text, Color color) = switch (reward.status) {
-      RewardStatus.active => (
-        Icons.schedule,
-        rewardValidityLabel(reward),
-        isRewardExpiringSoon(reward)
-            ? AppColor.warning
-            : AppColor.textSecondary,
-      ),
-      RewardStatus.used => (
-        Icons.check_circle_outline,
-        reward.usedAt == null
-            ? 'Sudah dipakai'
-            : 'Dipakai ${formatRewardDate(reward.usedAt!)}',
-        AppColor.textSecondary,
-      ),
-      RewardStatus.expired => (
-        Icons.event_busy_outlined,
-        'Berakhir ${formatRewardDate(reward.validUntil)}',
-        AppColor.textSecondary,
-      ),
-    };
-
-    return Row(
-      children: [
-        Icon(icon, size: 14, color: color),
-        const SizedBox(width: 4),
-        Expanded(
-          child: Text(
-            text,
-            maxLines: 2,
-            overflow: TextOverflow.ellipsis,
-            style: AppStyle.xs.copyWith(
-              color: color,
-              fontWeight: FontWeight.w600,
-            ),
-          ),
-        ),
-      ],
-    );
-  }
-}
-
-/// Persegi panjang membulat dengan lekuk setengah lingkaran di atas dan
-/// bawah pada posisi [notchX], tempat garis sobekan tiket.
-class _TicketClipper extends CustomClipper<Path> {
-  const _TicketClipper({required this.notchX});
-
-  final double notchX;
-
-  static const double _radius = 16;
-  static const double _notchRadius = 8;
-
-  @override
-  Path getClip(Size size) {
-    final card = Path()
-      ..addRRect(
-        RRect.fromRectAndRadius(
-          Offset.zero & size,
-          const Radius.circular(_radius),
-        ),
-      );
-    final notches = Path()
-      ..addOval(
-        Rect.fromCircle(center: Offset(notchX, 0), radius: _notchRadius),
-      )
-      ..addOval(
-        Rect.fromCircle(
-          center: Offset(notchX, size.height),
-          radius: _notchRadius,
-        ),
-      );
-    return Path.combine(PathOperation.difference, card, notches);
-  }
-
-  @override
-  bool shouldReclip(covariant _TicketClipper oldClipper) =>
-      oldClipper.notchX != notchX;
-}
-
-class _VerticalDashPainter extends CustomPainter {
-  const _VerticalDashPainter();
-
-  static const double _dash = 5;
-  static const double _gap = 4;
-
-  @override
-  void paint(Canvas canvas, Size size) {
-    final paint = Paint()
-      ..color = AppColor.border
-      ..strokeWidth = size.width;
-    final x = size.width / 2;
-
-    for (double y = 0; y < size.height; y += _dash + _gap) {
-      final end = (y + _dash).clamp(0, size.height).toDouble();
-      canvas.drawLine(Offset(x, y), Offset(x, end), paint);
-    }
-  }
-
-  @override
-  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
-}

lib/presentation/pages/reward/widgets/reward_detail_sheet.dart

@@ -1,280 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
-import 'package:qr_flutter/qr_flutter.dart';
-
-import '../../../../common/extension/extension.dart';
-import '../../../../common/theme/theme.dart';
-import '../../../../common/ui/painter/dashed_line_painter.dart';
-import '../../../../sample/reward_sample_data.dart';
-import '../../../components/toast/flushbar.dart';
-import '../reward_ui.dart';
-
-class RewardDetailSheet extends StatelessWidget {
-  const RewardDetailSheet({super.key, required this.reward});
-
-  final Reward reward;
-
-  static Future<void> show(BuildContext context, Reward reward) {
-    return showModalBottomSheet<void>(
-      context: context,
-      isScrollControlled: true,
-      backgroundColor: AppColor.white,
-      shape: const RoundedRectangleBorder(
-        borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
-      ),
-      builder: (_) => RewardDetailSheet(reward: reward),
-    );
-  }
-
-  bool get _isActive => reward.status == RewardStatus.active;
-
-  @override
-  Widget build(BuildContext context) {
-    return ConstrainedBox(
-      constraints: BoxConstraints(
-        maxHeight: MediaQuery.sizeOf(context).height * 0.85,
-      ),
-      child: SafeArea(
-        top: false,
-        child: SingleChildScrollView(
-          padding: const EdgeInsets.fromLTRB(20, 12, 20, 20),
-          child: Column(
-            crossAxisAlignment: CrossAxisAlignment.stretch,
-            children: [
-              Center(
-                child: Container(
-                  width: 40,
-                  height: 4,
-                  decoration: BoxDecoration(
-                    color: AppColor.border,
-                    borderRadius: BorderRadius.circular(2),
-                  ),
-                ),
-              ),
-              const SizedBox(height: 20),
-              _buildHeader(),
-              const SizedBox(height: 20),
-              if (_isActive && reward.couponCode != null)
-                _CouponBox(code: reward.couponCode!)
-              else
-                _buildInactiveNote(),
-              const SizedBox(height: 20),
-              _InfoRow(
-                label: 'Ditukar pada',
-                value: formatRewardDate(reward.redeemedAt),
-              ),
-              _InfoRow(
-                label: 'Berlaku sampai',
-                value: formatRewardDate(reward.validUntil),
-                valueColor: isRewardExpiringSoon(reward)
-                    ? AppColor.warning
-                    : null,
-              ),
-              if (reward.usedAt != null)
-                _InfoRow(
-                  label: 'Dipakai pada',
-                  value: formatRewardDate(reward.usedAt!),
-                ),
-              _InfoRow(
-                label: 'Poin ditukar',
-                value: '${reward.pointsUsed.thousandFormat} poin',
-              ),
-              if (reward.termsAndConditions != null) ...[
-                const SizedBox(height: 16),
-                Text(
-                  'Syarat & Ketentuan',
-                  style: AppStyle.md.copyWith(fontWeight: FontWeight.w700),
-                ),
-                const SizedBox(height: 6),
-                Text(
-                  reward.termsAndConditions!,
-                  style: AppStyle.sm.copyWith(
-                    color: AppColor.textSecondary,
-                    height: 1.5,
-                  ),
-                ),
-              ],
-            ],
-          ),
-        ),
-      ),
-    );
-  }
-
-  Widget _buildHeader() {
-    return Row(
-      children: [
-        Container(
-          width: 56,
-          height: 56,
-          alignment: Alignment.center,
-          decoration: BoxDecoration(
-            color: _isActive
-                ? AppColor.primary.withOpacity(0.06)
-                : AppColor.background,
-            borderRadius: BorderRadius.circular(14),
-          ),
-          child: RewardEmoji(reward: reward, size: 28),
-        ),
-        const SizedBox(width: 12),
-        Expanded(
-          child: Column(
-            crossAxisAlignment: CrossAxisAlignment.start,
-            children: [
-              Text(
-                reward.categoryName.toUpperCase(),
-                style: AppStyle.xs.copyWith(
-                  color: AppColor.textSecondary,
-                  fontWeight: FontWeight.w700,
-                  letterSpacing: 0.6,
-                ),
-              ),
-              const SizedBox(height: 2),
-              Text(
-                reward.name,
-                style: AppStyle.xl.copyWith(fontWeight: FontWeight.w700),
-              ),
-              Text(
-                reward.description,
-                style: AppStyle.sm.copyWith(color: AppColor.textSecondary),
-              ),
-            ],
-          ),
-        ),
-        const SizedBox(width: 8),
-        RewardStatusBadge(status: reward.status),
-      ],
-    );
-  }
-
-  Widget _buildInactiveNote() {
-    final message = switch (reward.status) {
-      RewardStatus.used =>
-        reward.usedAt == null
-            ? 'Reward ini sudah dipakai.'
-            : 'Reward ini sudah dipakai pada '
-                  '${formatRewardDate(reward.usedAt!)}.',
-      _ =>
-        'Masa berlaku reward ini sudah habis pada '
-            '${formatRewardDate(reward.validUntil)}.',
-    };
-
-    return Container(
-      padding: const EdgeInsets.all(14),
-      decoration: BoxDecoration(
-        color: AppColor.background,
-        borderRadius: BorderRadius.circular(AppValue.borderRadius),
-      ),
-      child: Row(
-        children: [
-          Icon(Icons.info_outline, size: 20, color: reward.status.color),
-          const SizedBox(width: 10),
-          Expanded(
-            child: Text(
-              message,
-              style: AppStyle.sm.copyWith(color: AppColor.textSecondary),
-            ),
-          ),
-        ],
-      ),
-    );
-  }
-}
-
-class _CouponBox extends StatelessWidget {
-  const _CouponBox({required this.code});
-
-  final String code;
-
-  Future<void> _copy(BuildContext context) async {
-    await Clipboard.setData(ClipboardData(text: code));
-    if (!context.mounted) return;
-    AppFlushbar.showSuccess(context, 'Kode reward disalin');
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return Container(
-      padding: const EdgeInsets.all(16),
-      decoration: BoxDecoration(
-        border: Border.all(color: AppColor.border),
-        borderRadius: BorderRadius.circular(16),
-      ),
-      child: Column(
-        children: [
-          QrImageView(
-            data: code,
-            size: 168,
-            padding: EdgeInsets.zero,
-            backgroundColor: AppColor.white,
-          ),
-          const SizedBox(height: 12),
-          Text(
-            'Tunjukkan QR atau kode ini ke kasir',
-            style: AppStyle.sm.copyWith(color: AppColor.textSecondary),
-          ),
-          const SizedBox(height: 14),
-          CustomPaint(
-            size: const Size(double.infinity, 1),
-            painter: DashedLinePainter(),
-          ),
-          const SizedBox(height: 6),
-          Row(
-            mainAxisAlignment: MainAxisAlignment.center,
-            children: [
-              Flexible(
-                child: Text(
-                  code,
-                  style: AppStyle.xl.copyWith(
-                    fontWeight: FontWeight.w700,
-                    letterSpacing: 2,
-                  ),
-                ),
-              ),
-              IconButton(
-                onPressed: () => _copy(context),
-                tooltip: 'Salin kode',
-                icon: const Icon(
-                  Icons.copy_rounded,
-                  size: 20,
-                  color: AppColor.primary,
-                ),
-              ),
-            ],
-          ),
-        ],
-      ),
-    );
-  }
-}
-
-class _InfoRow extends StatelessWidget {
-  const _InfoRow({required this.label, required this.value, this.valueColor});
-
-  final String label;
-  final String value;
-  final Color? valueColor;
-
-  @override
-  Widget build(BuildContext context) {
-    return Padding(
-      padding: const EdgeInsets.symmetric(vertical: 6),
-      child: Row(
-        children: [
-          Text(
-            label,
-            style: AppStyle.sm.copyWith(color: AppColor.textSecondary),
-          ),
-          const Spacer(),
-          Text(
-            value,
-            style: AppStyle.sm.copyWith(
-              color: valueColor ?? AppColor.textPrimary,
-              fontWeight: FontWeight.w600,
-            ),
-          ),
-        ],
-      ),
-    );
-  }
-}

lib/presentation/pages/reward/widgets/ticket_card.dart

@@ -0,0 +1,168 @@
+import 'package:flutter/material.dart';
+
+import '../../../../common/theme/theme.dart';
+
+/// Kartu berbentuk tiket: sobekan kiri ([stub]) dan isi kanan ([body]),
+/// dipisah garis putus-putus.
+class TicketCard extends StatelessWidget {
+  const TicketCard({
+    super.key,
+    required this.stub,
+    required this.body,
+    required this.onTap,
+    this.active = true,
+  });
+
+  final Widget stub;
+  final Widget body;
+  final VoidCallback onTap;
+
+  /// Latar sobekan berwarna untuk voucher yang bisa ditukar / dipakai.
+  final bool active;
+
+  static const double stubWidth = 84;
+
+  @override
+  Widget build(BuildContext context) {
+    return PhysicalShape(
+      clipper: const _TicketClipper(notchX: stubWidth + 0.5),
+      color: AppColor.white,
+      elevation: 2,
+      shadowColor: Colors.black.withOpacity(0.25),
+      child: Material(
+        type: MaterialType.transparency,
+        child: InkWell(
+          onTap: onTap,
+          child: IntrinsicHeight(
+            child: Row(
+              crossAxisAlignment: CrossAxisAlignment.stretch,
+              children: [
+                Container(
+                  width: stubWidth,
+                  color: active
+                      ? AppColor.primary.withOpacity(0.06)
+                      : AppColor.background,
+                  padding: const EdgeInsets.symmetric(
+                    horizontal: 8,
+                    vertical: 16,
+                  ),
+                  child: stub,
+                ),
+                const Padding(
+                  padding: EdgeInsets.symmetric(vertical: 14),
+                  child: CustomPaint(
+                    size: Size(1, double.infinity),
+                    painter: _VerticalDashPainter(),
+                  ),
+                ),
+                Expanded(child: body),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+/// Persegi panjang membulat dengan lekuk setengah lingkaran di atas dan
+/// bawah pada posisi [notchX], tempat garis sobekan tiket.
+class _TicketClipper extends CustomClipper<Path> {
+  const _TicketClipper({required this.notchX});
+
+  final double notchX;
+
+  static const double _radius = 16;
+  static const double _notchRadius = 8;
+
+  @override
+  Path getClip(Size size) {
+    final card = Path()
+      ..addRRect(
+        RRect.fromRectAndRadius(
+          Offset.zero & size,
+          const Radius.circular(_radius),
+        ),
+      );
+    final notches = Path()
+      ..addOval(
+        Rect.fromCircle(center: Offset(notchX, 0), radius: _notchRadius),
+      )
+      ..addOval(
+        Rect.fromCircle(
+          center: Offset(notchX, size.height),
+          radius: _notchRadius,
+        ),
+      );
+    return Path.combine(PathOperation.difference, card, notches);
+  }
+
+  @override
+  bool shouldReclip(covariant _TicketClipper oldClipper) =>
+      oldClipper.notchX != notchX;
+}
+
+class _VerticalDashPainter extends CustomPainter {
+  const _VerticalDashPainter();
+
+  static const double _dash = 5;
+  static const double _gap = 4;
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final paint = Paint()
+      ..color = AppColor.border
+      ..strokeWidth = size.width;
+    final x = size.width / 2;
+
+    for (double y = 0; y < size.height; y += _dash + _gap) {
+      final end = (y + _dash).clamp(0, size.height).toDouble();
+      canvas.drawLine(Offset(x, y), Offset(x, end), paint);
+    }
+  }
+
+  @override
+  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
+}
+
+/// Isi sobekan: gambar voucher dan EnakPoint yang ditukar.
+class TicketStub extends StatelessWidget {
+  const TicketStub({
+    super.key,
+    required this.image,
+    required this.pointCost,
+    this.active = true,
+  });
+
+  final Widget image;
+  final String pointCost;
+  final bool active;
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: [
+        image,
+        const SizedBox(height: 8),
+        FittedBox(
+          fit: BoxFit.scaleDown,
+          child: Text(
+            pointCost,
+            style: AppStyle.md.copyWith(
+              color: active ? AppColor.primary : AppColor.textSecondary,
+              fontWeight: FontWeight.w700,
+            ),
+          ),
+        ),
+        Text(
+          'EnakPoint',
+          style: AppStyle.xs.copyWith(
+            fontSize: 10,
+            color: AppColor.textSecondary,
+          ),
+        ),
+      ],
+    );
+  }
+}

lib/presentation/pages/reward/widgets/voucher_card.dart

@@ -0,0 +1,124 @@
+import 'package:flutter/material.dart';
+
+import '../../../../common/extension/extension.dart';
+import '../../../../common/theme/theme.dart';
+import '../../../../domain/wallet/wallet.dart';
+import '../../wallet/wallet_ui.dart';
+import '../reward_ui.dart';
+import 'ticket_card.dart';
+
+/// Voucher di katalog (§9.1).
+class VoucherCard extends StatelessWidget {
+  const VoucherCard({
+    super.key,
+    required this.voucher,
+    required this.canAfford,
+    required this.onTap,
+  });
+
+  final Voucher voucher;
+
+  /// Saldo EnakPoint cukup untuk [Voucher.pointCost].
+  final bool canAfford;
+  final VoidCallback onTap;
+
+  bool get _canRedeem => canAfford && !voucher.isOutOfStock;
+
+  @override
+  Widget build(BuildContext context) {
+    final faceValue = voucherFaceValueLabel(voucher.type, voucher.faceValue);
+
+    return TicketCard(
+      active: _canRedeem,
+      onTap: onTap,
+      stub: TicketStub(
+        image: VoucherImage(
+          url: voucher.imageUrl,
+          size: 44,
+          dimmed: voucher.isOutOfStock,
+        ),
+        pointCost: voucher.pointCost.thousandFormat,
+        active: _canRedeem,
+      ),
+      body: Padding(
+        padding: const EdgeInsets.fromLTRB(14, 12, 14, 12),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Text(
+              voucherTypeLabel(voucher.type, voucher.faceValue).toUpperCase(),
+              style: AppStyle.xs.copyWith(
+                color: AppColor.textSecondary,
+                fontWeight: FontWeight.w700,
+                letterSpacing: 0.6,
+              ),
+            ),
+            const SizedBox(height: 4),
+            Text(
+              voucher.name,
+              maxLines: 2,
+              overflow: TextOverflow.ellipsis,
+              style: AppStyle.lg.copyWith(fontWeight: FontWeight.w700),
+            ),
+            if (faceValue != null)
+              Text(
+                faceValue,
+                style: AppStyle.sm.copyWith(color: AppColor.textSecondary),
+              ),
+            const SizedBox(height: 10),
+            Row(
+              children: [
+                Expanded(child: _buildFootnote()),
+                const SizedBox(width: 8),
+                _buildAction(),
+              ],
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _buildFootnote() {
+    final parts = [
+      if (voucher.validUntil != null)
+        's/d ${formatWibDate(voucher.validUntil!)}',
+      if (voucher.available != null && !voucher.isOutOfStock)
+        'sisa ${voucher.available!.thousandFormat}',
+    ];
+    if (parts.isEmpty) return const SizedBox.shrink();
+
+    return Text(
+      parts.join(' · '),
+      maxLines: 2,
+      overflow: TextOverflow.ellipsis,
+      style: AppStyle.xs.copyWith(
+        color: AppColor.textSecondary,
+        fontWeight: FontWeight.w600,
+      ),
+    );
+  }
+
+  Widget _buildAction() {
+    final (String label, bool enabled) = voucher.isOutOfStock
+        ? ('Habis', false)
+        : canAfford
+        ? ('Tukar', true)
+        : ('Poin kurang', false);
+
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 6),
+      decoration: BoxDecoration(
+        color: enabled ? AppColor.primary : AppColor.background,
+        borderRadius: BorderRadius.circular(20),
+      ),
+      child: Text(
+        label,
+        style: AppStyle.sm.copyWith(
+          color: enabled ? AppColor.white : AppColor.textSecondary,
+          fontWeight: FontWeight.w700,
+        ),
+      ),
+    );
+  }
+}

lib/presentation/pages/wallet/exchange_page.dart

@@ -22,7 +22,7 @@ import 'widgets/wallet_confirm_dialog.dart';
 import 'widgets/wallet_history_section.dart';
 import 'widgets/wallet_result_view.dart';
 
-/// Tukar EnakCoin → EnakPoint (§8.1).
+/// Tukar EnakCoin → EnakPoint (§7.1).
 @RoutePage()
 class ExchangePage extends StatefulWidget implements AutoRouteWrapper {
   const ExchangePage({super.key});

lib/presentation/pages/wallet/payment_code_page.dart

@@ -1,226 +0,0 @@
-import 'dart:async';
-
-import 'package:auto_route/auto_route.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:qr_flutter/qr_flutter.dart';
-
-import '../../../application/wallet/payment_code_form/payment_code_form_bloc.dart';
-import '../../../application/wallet/wallet_loader/wallet_loader_bloc.dart';
-import '../../../common/extension/extension.dart';
-import '../../../common/theme/theme.dart';
-import '../../../domain/wallet/wallet.dart';
-import '../../../injection.dart';
-import '../../components/button/button.dart';
-import '../../components/toast/flushbar.dart';
-import '../pin/pin_guard.dart';
-import '../pin/widgets/pin_sheet.dart';
-import 'wallet_ui.dart';
-
-/// Bayar di kasir dengan kode bayar (§7.1).
-@RoutePage()
-class PaymentCodePage extends StatefulWidget implements AutoRouteWrapper {
-  const PaymentCodePage({super.key});
-
-  @override
-  State<PaymentCodePage> createState() => _PaymentCodePageState();
-
-  @override
-  Widget wrappedRoute(BuildContext context) =>
-      BlocProvider(create: (_) => getIt<PaymentCodeFormBloc>(), child: this);
-}
-
-class _PaymentCodePageState extends State<PaymentCodePage> {
-  Timer? _ticker;
-
-  @override
-  void initState() {
-    super.initState();
-    WidgetsBinding.instance.addPostFrameCallback((_) => _generate());
-    _ticker = Timer.periodic(const Duration(seconds: 1), (_) => _tick());
-  }
-
-  @override
-  void dispose() {
-    _ticker?.cancel();
-    super.dispose();
-  }
-
-  void _tick() {
-    if (!mounted) return;
-    final code = context.read<PaymentCodeFormBloc>().state.paymentCode;
-    if (code == null) return;
-
-    if (!DateTime.now().isBefore(code.expiresAt)) {
-      context.read<PaymentCodeFormBloc>().add(
-        const PaymentCodeFormEvent.expired(),
-      );
-    } else {
-      setState(() {});
-    }
-  }
-
-  Future<void> _generate() async {
-    if (!await ensurePinReady(context) || !mounted) return;
-
-    await showPinSheet(
-      context,
-      title: 'Bayar di kasir',
-      subtitle: 'Masukkan PIN untuk menampilkan kode bayar',
-      onSubmit: (pin) async {
-        final bloc = context.read<PaymentCodeFormBloc>();
-        bloc.add(PaymentCodeFormEvent.submitted(pin));
-        final state = await bloc.stream.firstWhere((s) => !s.isSubmitting);
-        return state.failureOption.toNullable();
-      },
-      onFailure: (f) => AppFlushbar.showError(context, walletFailureMessage(f)),
-    );
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return BlocBuilder<PaymentCodeFormBloc, PaymentCodeFormState>(
-      builder: (context, state) {
-        final code = state.paymentCode;
-
-        return Scaffold(
-          backgroundColor: AppColor.background,
-          appBar: AppBar(title: const Text('Bayar di Kasir')),
-          body: ListView(
-            padding: const EdgeInsets.all(16),
-            children: [
-              _buildBalance(),
-              const SizedBox(height: 16),
-              code == null ? _buildEmpty(state.isSubmitting) : _buildCode(code),
-              const SizedBox(height: 16),
-              Text(
-                'Tunjukkan kode ini ke kasir. Kasir yang memilih jumlah '
-                'EnakPoint yang dipakai. Kode hanya bisa dipakai sekali, dan '
-                'membuat kode baru membatalkan kode sebelumnya.',
-                style: AppStyle.sm.copyWith(color: AppColor.textSecondary),
-                textAlign: TextAlign.center,
-              ),
-            ],
-          ),
-        );
-      },
-    );
-  }
-
-  Widget _buildBalance() {
-    return BlocBuilder<WalletLoaderBloc, WalletLoaderState>(
-      builder: (context, state) {
-        final summary = state.summary;
-        return Container(
-          padding: const EdgeInsets.all(16),
-          decoration: BoxDecoration(
-            color: AppColor.white,
-            borderRadius: BorderRadius.circular(AppValue.borderRadius),
-          ),
-          child: Row(
-            children: [
-              const WalletCurrencyIcon(
-                currency: WalletCurrency.point,
-                size: 28,
-              ),
-              const SizedBox(width: 12),
-              Expanded(
-                child: Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  children: [
-                    Text(
-                      '${summary.pointBalance.thousandFormat} EnakPoint',
-                      style: AppStyle.lg.copyWith(fontWeight: FontWeight.w700),
-                    ),
-                    Text(
-                      pointDiscountLabel(summary.pointDiscountValue),
-                      style: AppStyle.sm.copyWith(
-                        color: AppColor.textSecondary,
-                      ),
-                    ),
-                  ],
-                ),
-              ),
-            ],
-          ),
-        );
-      },
-    );
-  }
-
-  Widget _buildEmpty(bool isSubmitting) {
-    return Container(
-      padding: const EdgeInsets.all(24),
-      decoration: BoxDecoration(
-        color: AppColor.white,
-        borderRadius: BorderRadius.circular(AppValue.borderRadius),
-      ),
-      child: Column(
-        children: [
-          const Icon(Icons.qr_code_2, size: 72, color: AppColor.textLight),
-          const SizedBox(height: 12),
-          Text(
-            'Kode bayar belum dibuat atau sudah kedaluwarsa',
-            textAlign: TextAlign.center,
-            style: AppStyle.md.copyWith(color: AppColor.textSecondary),
-          ),
-          const SizedBox(height: 16),
-          AppElevatedButton(
-            title: 'Buat kode baru',
-            isLoading: isSubmitting,
-            onPressed: isSubmitting ? null : _generate,
-          ),
-        ],
-      ),
-    );
-  }
-
-  Widget _buildCode(PaymentCode code) {
-    final remaining = code.expiresAt.difference(DateTime.now());
-    final spacedCode = code.code.split('').join(' ');
-
-    return Container(
-      padding: const EdgeInsets.all(24),
-      decoration: BoxDecoration(
-        color: AppColor.white,
-        borderRadius: BorderRadius.circular(AppValue.borderRadius),
-      ),
-      child: Column(
-        children: [
-          Text(
-            spacedCode,
-            style: AppStyle.h1.copyWith(
-              fontWeight: FontWeight.w700,
-              letterSpacing: 2,
-            ),
-          ),
-          const SizedBox(height: 16),
-          QrImageView(
-            data: code.qrPayload,
-            size: 220,
-            backgroundColor: AppColor.white,
-          ),
-          const SizedBox(height: 16),
-          Row(
-            mainAxisAlignment: MainAxisAlignment.center,
-            children: [
-              const Icon(
-                Icons.timer_outlined,
-                size: 18,
-                color: AppColor.warning,
-              ),
-              const SizedBox(width: 6),
-              Text(
-                'Berlaku ${formatCountdown(remaining)}',
-                style: AppStyle.md.copyWith(
-                  color: AppColor.warning,
-                  fontWeight: FontWeight.w700,
-                ),
-              ),
-            ],
-          ),
-        ],
-      ),
-    );
-  }
-}

lib/presentation/pages/wallet/transfer_page.dart

@@ -20,7 +20,7 @@ import 'widgets/wallet_history_section.dart';
 import 'widgets/wallet_confirm_dialog.dart';
 import 'widgets/wallet_result_view.dart';
 
-/// Transfer EnakPoint / EnakCoin ke customer lain (§8.2).
+/// Transfer EnakPoint / EnakCoin ke customer lain (§7.2).
 @RoutePage()
 class TransferPage extends StatefulWidget implements AutoRouteWrapper {
   const TransferPage({super.key});

lib/presentation/pages/wallet/wallet_history_page.dart

@@ -83,6 +83,7 @@ class _WalletHistoryPageState extends State<WalletHistoryPage>
         borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
       ),
       builder: (_) => _FilterSheet(
+        currency: state.currency,
         initial: _HistoryFilter(
           types: state.types,
           from: state.from,
@@ -264,8 +265,10 @@ class _HistoryFilter {
 }
 
 class _FilterSheet extends StatefulWidget {
-  const _FilterSheet({required this.initial});
+  const _FilterSheet({required this.currency, required this.initial});
 
+  /// Tab yang sedang aktif; hanya tipe milik mata uang ini yang ditawarkan.
+  final WalletCurrency currency;
   final _HistoryFilter initial;
 
   @override
@@ -273,6 +276,8 @@ class _FilterSheet extends StatefulWidget {
 }
 
 class _FilterSheetState extends State<_FilterSheet> {
+  late final List<WalletTransactionType> _filterable =
+      WalletTransactionType.filterableFor(widget.currency);
   late final Set<WalletTransactionType> _types = {...widget.initial.types};
   late DateTime? _from = widget.initial.from;
   late DateTime? _to = widget.initial.to;
@@ -316,7 +321,7 @@ class _FilterSheetState extends State<_FilterSheet> {
             Wrap(
               spacing: 8,
               runSpacing: 8,
-              children: WalletTransactionType.filterable.map((type) {
+              children: _filterable.map((type) {
                 final selected = _types.contains(type);
                 return FilterChip(
                   label: Text(type.label, style: AppStyle.sm),
@@ -361,9 +366,7 @@ class _FilterSheetState extends State<_FilterSheet> {
                     title: 'Terapkan',
                     onPressed: () => Navigator.of(context).pop(
                       _HistoryFilter(
-                        types: WalletTransactionType.filterable
-                            .where(_types.contains)
-                            .toList(),
+                        types: _filterable.where(_types.contains).toList(),
                         from: _from,
                         to: _to,
                       ),

lib/presentation/pages/wallet/wallet_page.dart

@@ -211,11 +211,11 @@ class _WalletPageState extends State<WalletPage> {
   }
 
   Widget _buildActions(WalletSummary summary) {
-    final actions = [
-      (Icons.qr_code_2, 'Bayar di kasir', const PaymentCodeRoute()),
+    final actions = <(IconData, String, PageRouteInfo)>[
       (Icons.swap_horiz, 'Tukar EnakCoin', const ExchangeRoute()),
       (Icons.send_outlined, 'Transfer', const TransferRoute()),
-      (Icons.casino_outlined, 'Main game', const FerrisWheelRoute()),
+      (Icons.casino_outlined, 'Main game', const EnakGameRoute()),
+      (Icons.confirmation_number_outlined, 'Voucher', const RewardRoute()),
     ];
 
     return Container(

lib/presentation/pages/wallet/widgets/wallet_transaction_tile.dart

@@ -22,6 +22,9 @@ class WalletTransactionTile extends StatelessWidget {
   Widget build(BuildContext context) {
     final tx = transaction;
     final color = signedAmountColor(tx.amount);
+    // Tipe baru yang belum dikenal app: description saja, tanpa label.
+    final isKnownType = tx.type != WalletTransactionType.unknown;
+    final title = isKnownType ? tx.type.label : tx.description;
 
     return Padding(
       padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
@@ -47,10 +50,10 @@ class WalletTransactionTile extends StatelessWidget {
               crossAxisAlignment: CrossAxisAlignment.start,
               children: [
                 Text(
-                  tx.type.label,
+                  title,
                   style: AppStyle.md.copyWith(fontWeight: FontWeight.w700),
                 ),
-                if (tx.description.isNotEmpty) ...[
+                if (isKnownType && tx.description.isNotEmpty) ...[
                   const SizedBox(height: 2),
                   Text(
                     tx.description,