loyalty

2025-10-24 17:35:39 +07:00
parent 82ce30961b
commit 860a8788b6
17 changed files with 2572 additions and 32 deletions
--- a/lib/features/loyalty/presentation/widgets/points_balance_card.dart
+++ b/lib/features/loyalty/presentation/widgets/points_balance_card.dart
@@ -0,0 +1,103 @@
+/// Points Balance Card Widget
+///
+/// Displays user's available loyalty points with gradient background.
+library;
+
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:intl/intl.dart';
+import 'package:worker/core/theme/colors.dart';
+import 'package:worker/features/loyalty/presentation/providers/loyalty_points_provider.dart';
+
+/// Points Balance Card
+///
+/// Shows:
+/// - Available points balance
+/// - Expiring points information
+///
+/// Design matches HTML: linear-gradient(135deg, #005B9A 0%, #38B6FF 100%)
+class PointsBalanceCard extends ConsumerWidget {
+  const PointsBalanceCard({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final pointsState = ref.watch(loyaltyPointsProvider);
+    final numberFormat = NumberFormat('#,###', 'vi_VN');
+    final dateFormat = DateFormat('dd/MM/yyyy', 'vi_VN');
+
+    return Container(
+      width: double.infinity,
+      padding: const EdgeInsets.all(24),
+      decoration: BoxDecoration(
+        gradient: const LinearGradient(
+          colors: [AppColors.primaryBlue, AppColors.lightBlue],
+          begin: Alignment.topLeft,
+          end: Alignment.bottomRight,
+        ),
+        borderRadius: BorderRadius.circular(16),
+        boxShadow: [
+          BoxShadow(
+            color: AppColors.primaryBlue.withValues(alpha: 0.3),
+            blurRadius: 12,
+            offset: const Offset(0, 4),
+          ),
+        ],
+      ),
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          // "Điểm khả dụng" label
+          Text(
+            'Điểm khả dụng',
+            style: TextStyle(
+              color: Colors.white.withValues(alpha: 0.9),
+              fontSize: 14,
+              fontWeight: FontWeight.w400,
+            ),
+          ),
+          const SizedBox(height: 8),
+
+          // Points amount
+          Text(
+            numberFormat.format(pointsState.availablePoints),
+            style: const TextStyle(
+              color: Colors.white,
+              fontSize: 36,
+              fontWeight: FontWeight.w700,
+              letterSpacing: -0.5,
+            ),
+          ),
+          const SizedBox(height: 8),
+
+          // Expiration info
+          if (pointsState.expiringPoints > 0 &&
+              pointsState.expirationDate != null)
+            Row(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                Icon(
+                  Icons.info_outline,
+                  size: 14,
+                  color: Colors.white.withValues(alpha: 0.8),
+                ),
+                const SizedBox(width: 6),
+                Flexible(
+                  child: Text(
+                    'Điểm sẽ hết hạn: ${numberFormat.format(pointsState.expiringPoints)} điểm vào ${dateFormat.format(pointsState.expirationDate!)}',
+                    style: TextStyle(
+                      color: Colors.white.withValues(alpha: 0.8),
+                      fontSize: 12,
+                      fontWeight: FontWeight.w400,
+                    ),
+                    textAlign: TextAlign.center,
+                    maxLines: 2,
+                    overflow: TextOverflow.ellipsis,
+                  ),
+                ),
+              ],
+            ),
+        ],
+      ),
+    );
+  }
+}