feat: integrate enakgame and voucher

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,
+        ),
+      ),
+    );
+  }
+}