fix

.claude/agents/flutter-widget-expert.md

@@ -77,6 +77,8 @@ You are a Flutter widget specialist with deep expertise in:
 
 - Use `ListView.builder` for long lists
 
+- Use 'spacing' properties for layout spacing in Column, Row
+
 
 ## Responsive Design:
 

lib/features/home/presentation/pages/home_page.dart

@@ -39,16 +39,8 @@ class HomePage extends ConsumerWidget {
     final promotionsAsync = ref.watch(promotionsProvider);
 
     return Scaffold(
-      backgroundColor: AppColors.grey50,
+      backgroundColor: const Color(0xFFF4F6F8), // --background-gray from CSS
-      body: RefreshIndicator(
+      body: CustomScrollView(
-        onRefresh: () async {
-          // Refresh both member card and promotions
-          await Future.wait<void>([
-            ref.read(memberCardProvider.notifier).refresh(),
-            ref.read(promotionsProvider.notifier).refresh(),
-          ]);
-        },
-        child: CustomScrollView(
         slivers: [
           // Add top padding for status bar
           SliverPadding(
@@ -110,9 +102,7 @@ class HomePage extends ConsumerWidget {
           SliverToBoxAdapter(
             child: promotionsAsync.when(
               data: (promotions) => promotions.isNotEmpty
-                    ? Padding(
+                  ? PromotionSlider(
-                        padding: const EdgeInsets.symmetric(vertical: 8),
-                        child: PromotionSlider(
                       promotions: promotions,
                       onPromotionTap: (promotion) {
                         // TODO: Navigate to promotion details
@@ -124,7 +114,6 @@ class HomePage extends ConsumerWidget {
                           ),
                         );
                       },
-                        ),
                     )
                   : const SizedBox.shrink(),
               loading: () => const Padding(
@@ -137,23 +126,24 @@ class HomePage extends ConsumerWidget {
 
           // Quick Action Sections
           SliverToBoxAdapter(
+            child: Padding(
+              padding: const EdgeInsets.symmetric(horizontal: 16),
               child: Column(
                 children: [
-                  const SizedBox(height: 8),
                   // Products & Cart Section
                   QuickActionSection(
-                    title: '${l10n.products} & ${l10n.cart}',
+                    title: 'Sản phẩm & Giỏ hàng',
                     actions: [
                       QuickAction(
                         icon: Icons.grid_view,
-                        label: l10n.products,
+                        label: 'Sản phẩm',
                         onTap: () => context.pushNamed(RouteNames.products),
                       ),
                       QuickAction(
                         icon: Icons.shopping_cart,
-                        label: l10n.cart,
+                        label: 'Giỏ hàng',
                         badge: '3',
-                        onTap: () => _showComingSoon(context, l10n.cart, l10n),
+                        onTap: () => _showComingSoon(context, 'Giỏ hàng', l10n),
                       ),
                       QuickAction(
                         icon: Icons.favorite,
@@ -166,70 +156,55 @@ class HomePage extends ConsumerWidget {
 
                   // Loyalty Section
                   QuickActionSection(
-                    title: l10n.loyalty,
+                    title: 'Khách hàng thân thiết',
                     actions: [
                       QuickAction(
-                        icon: Icons.card_giftcard,
+                        icon: Icons.add_circle_outline,
-                        label: l10n.redeemReward,
+                        label: 'Ghi nhận điểm',
                         onTap: () =>
-                            _showComingSoon(context, l10n.redeemReward, l10n),
+                            _showComingSoon(context, 'Ghi nhận điểm', l10n),
+                      ),
+                      QuickAction(
+                        icon: Icons.card_giftcard,
+                        label: 'Đổi quà',
+                        onTap: () => _showComingSoon(context, 'Đổi quà', l10n),
                       ),
                       QuickAction(
                         icon: Icons.history,
-                        label: l10n.pointsHistory,
+                        label: 'Lịch sử điểm',
                         onTap: () =>
-                            _showComingSoon(context, l10n.pointsHistory, l10n),
+                            _showComingSoon(context, 'Lịch sử điểm', l10n),
-                      ),
-                      QuickAction(
-                        icon: Icons.person_add,
-                        label: l10n.referral,
-                        onTap: () =>
-                            _showComingSoon(context, l10n.referral, l10n),
-                      ),
-                    ],
-                  ),
-
-                  // Quote Requests Section
-                  QuickActionSection(
-                    title: l10n.quotes,
-                    actions: [
-                      QuickAction(
-                        icon: Icons.description,
-                        label: l10n.quotes,
-                        onTap: () =>
-                            _showComingSoon(context, l10n.quotes, l10n),
-                      ),
-                      QuickAction(
-                        icon: Icons.receipt_long,
-                        label: l10n.quotes,
-                        onTap: () =>
-                            _showComingSoon(context, l10n.quotes, l10n),
                       ),
                     ],
                   ),
 
                   // Orders & Payments Section
                   QuickActionSection(
-                    title: '${l10n.orders} & ${l10n.payments}',
+                    title: 'Đơn hàng & thanh toán',
                     actions: [
                       QuickAction(
-                        icon: Icons.inventory_2,
+                        icon: Icons.description,
-                        label: l10n.orders,
+                        label: 'Yêu cầu báo giá',
                         onTap: () =>
-                            _showComingSoon(context, l10n.orders, l10n),
+                            _showComingSoon(context, 'Yêu cầu báo giá', l10n),
                       ),
                       QuickAction(
-                        icon: Icons.payment,
+                        icon: Icons.inventory_2,
-                        label: l10n.payments,
+                        label: 'Đơn hàng',
+                        onTap: () => _showComingSoon(context, 'Đơn hàng', l10n),
+                      ),
+                      QuickAction(
+                        icon: Icons.receipt_long,
+                        label: 'Thanh toán',
                         onTap: () =>
-                            _showComingSoon(context, l10n.payments, l10n),
+                            _showComingSoon(context, 'Thanh toán', l10n),
                       ),
                     ],
                   ),
 
                   // Sample Houses & News Section
                   QuickActionSection(
-                    title: l10n.projects,
+                    title: 'Nhà mẫu, dự án & tin tức',
                     actions: [
                       QuickAction(
                         icon: Icons.home_work,
@@ -238,9 +213,9 @@ class HomePage extends ConsumerWidget {
                       ),
                       QuickAction(
                         icon: Icons.business,
-                        label: l10n.projects,
+                        label: 'Đăng ký dự án',
                         onTap: () =>
-                            _showComingSoon(context, l10n.projects, l10n),
+                            _showComingSoon(context, 'Đăng ký dự án', l10n),
                       ),
                       QuickAction(
                         icon: Icons.article,
@@ -250,63 +225,120 @@ class HomePage extends ConsumerWidget {
                     ],
                   ),
 
-                  // Bottom Padding (for FAB clearance)
+                  // Bottom Padding (for FAB and bottom nav clearance)
-                  const SizedBox(height: 80),
+                  const SizedBox(height: 100),
                 ],
               ),
             ),
-          ],
           ),
+        ],
       ),
 
-      // Floating Action Button (Chat)
+      // Floating Action Button (Chat) - positioned like HTML: bottom: 90px
-      floatingActionButton: FloatingActionButton(
+      floatingActionButton: Padding(
+        padding: const EdgeInsets.only(bottom: 20), // 90px - 70px (bottom nav)
+        child: FloatingActionButton(
           onPressed: () => _showComingSoon(context, l10n.chat, l10n),
           backgroundColor: AppColors.accentCyan,
-        child: const Icon(Icons.chat_bubble),
+          elevation: 8,
+          child: const Icon(Icons.chat_bubble, size: 24, color: Colors.white),
+        ),
       ),
 
       // Bottom Navigation Bar
-      bottomNavigationBar: BottomNavigationBar(
+      bottomNavigationBar: Container(
+        decoration: BoxDecoration(
+          color: Colors.white,
+          boxShadow: [
+            BoxShadow(
+              color: Colors.black.withValues(alpha: 0.05),
+              blurRadius: 10,
+              offset: const Offset(0, -2),
+            ),
+          ],
+        ),
+        child: SafeArea(
+          child: SizedBox(
+            height: 70,
+            child: BottomNavigationBar(
               type: BottomNavigationBarType.fixed,
+              backgroundColor: Colors.white,
+              selectedItemColor: AppColors.primaryBlue,
+              unselectedItemColor: const Color(0xFF666666),
+              selectedFontSize: 11,
+              unselectedFontSize: 11,
+              iconSize: 24,
               currentIndex: 0,
+              elevation: 0,
               items: [
                 BottomNavigationBarItem(
                   icon: const Icon(Icons.home),
-            label: l10n.home,
+                  label: 'Trang chủ',
                 ),
                 BottomNavigationBarItem(
                   icon: const Icon(Icons.loyalty),
-            label: l10n.loyalty,
+                  label: 'Hội viên',
                 ),
                 BottomNavigationBarItem(
                   icon: const Icon(Icons.local_offer),
-            label: l10n.promotions,
+                  label: 'Khuyến mãi',
                 ),
                 BottomNavigationBarItem(
-            icon: const Badge(
+                  icon: Stack(
-              label: Text('5'),
+                    clipBehavior: Clip.none,
-              child: Icon(Icons.notifications),
+                    children: [
+                      const Icon(Icons.notifications),
+                      Positioned(
+                        top: -4,
+                        right: -4,
+                        child: Container(
+                          padding: const EdgeInsets.symmetric(
+                            horizontal: 6,
+                            vertical: 2,
                           ),
-            label: l10n.notifications,
+                          decoration: BoxDecoration(
+                            color: AppColors.danger,
+                            borderRadius: BorderRadius.circular(12),
+                          ),
+                          constraints: const BoxConstraints(
+                            minWidth: 20,
+                            minHeight: 20,
+                          ),
+                          child: const Text(
+                            '5',
+                            style: TextStyle(
+                              color: Colors.white,
+                              fontSize: 11,
+                              fontWeight: FontWeight.w700,
+                            ),
+                            textAlign: TextAlign.center,
+                          ),
+                        ),
+                      ),
+                    ],
+                  ),
+                  label: 'Thông báo',
                 ),
                 BottomNavigationBarItem(
                   icon: const Icon(Icons.account_circle),
-            label: l10n.settings,
+                  label: 'Cài đặt',
                 ),
               ],
               onTap: (index) {
                 // TODO: Implement navigation
                 final labels = [
-            l10n.home,
+                  'Trang chủ',
-            l10n.loyalty,
+                  'Hội viên',
-            l10n.promotions,
+                  'Khuyến mãi',
-            l10n.notifications,
+                  'Thông báo',
-            l10n.settings,
+                  'Cài đặt',
                 ];
                 _showComingSoon(context, labels[index], l10n);
               },
             ),
+          ),
+        ),
+      ),
     );
   }
 

lib/features/home/presentation/widgets/promotion_slider.dart

@@ -14,17 +14,17 @@ import 'package:worker/features/home/domain/entities/promotion.dart';
 /// Displays a horizontal scrollable list of promotion cards.
 /// Each card shows an image, title, and brief description.
 class PromotionSlider extends StatelessWidget {
-  /// List of promotions to display
-  final List<Promotion> promotions;
-
-  /// Callback when a promotion is tapped
-  final void Function(Promotion promotion)? onPromotionTap;
 
   const PromotionSlider({
     super.key,
     required this.promotions,
     this.onPromotionTap,
   });
+  /// List of promotions to display
+  final List<Promotion> promotions;
+
+  /// Callback when a promotion is tapped
+  final void Function(Promotion promotion)? onPromotionTap;
 
   @override
   Widget build(BuildContext context) {
@@ -32,24 +32,28 @@ class PromotionSlider extends StatelessWidget {
       return const SizedBox.shrink();
     }
 
-    return Column(
+    return Padding(
+      padding: const EdgeInsets.only(bottom: 8),
+      child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           const Padding(
-          padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+            padding: EdgeInsets.symmetric(horizontal: 16),
             child: Text(
               'Chương trình ưu đãi',
               style: TextStyle(
-              fontSize: 20,
+                fontSize: 16,
-              fontWeight: FontWeight.bold,
+                fontWeight: FontWeight.w700,
+                color: Color(0xFF212121), // --text-dark
               ),
             ),
           ),
+          const SizedBox(height: 12),
           SizedBox(
-          height: 230,
+            height: 210, // 140px image + 54px text area
             child: ListView.builder(
               scrollDirection: Axis.horizontal,
-            padding: const EdgeInsets.symmetric(horizontal: 12),
+              padding: const EdgeInsets.symmetric(horizontal: 16),
               itemCount: promotions.length,
               itemBuilder: (context, index) {
                 return _PromotionCard(
@@ -62,19 +66,20 @@ class PromotionSlider extends StatelessWidget {
             ),
           ),
         ],
+      ),
     );
   }
 }
 
 /// Individual Promotion Card
 class _PromotionCard extends StatelessWidget {
-  final Promotion promotion;
-  final VoidCallback? onTap;
 
   const _PromotionCard({
     required this.promotion,
     this.onTap,
   });
+  final Promotion promotion;
+  final VoidCallback? onTap;
 
   @override
   Widget build(BuildContext context) {
@@ -82,13 +87,13 @@ class _PromotionCard extends StatelessWidget {
       onTap: onTap,
       child: Container(
         width: 280,
-        margin: const EdgeInsets.symmetric(horizontal: 4),
+        margin: const EdgeInsets.only(right: 12),
         decoration: BoxDecoration(
           color: Colors.white,
           borderRadius: BorderRadius.circular(12),
           boxShadow: [
             BoxShadow(
-              color: Colors.black.withOpacity(0.1),
+              color: Colors.black.withValues(alpha: 0.05),
               blurRadius: 8,
               offset: const Offset(0, 2),
             ),
@@ -96,6 +101,7 @@ class _PromotionCard extends StatelessWidget {
         ),
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.start,
+          mainAxisSize: MainAxisSize.min,
           children: [
             // Promotion Image
             ClipRRect(
@@ -104,7 +110,7 @@ class _PromotionCard extends StatelessWidget {
               child: CachedNetworkImage(
                 imageUrl: promotion.imageUrl,
                 height: 140,
-                width: double.infinity,
+                width: 280,
                 fit: BoxFit.cover,
                 placeholder: (context, url) => Container(
                   height: 140,
@@ -126,36 +132,40 @@ class _PromotionCard extends StatelessWidget {
             ),
 
             // Promotion Info
-            Expanded(
+            Container(
-              child: Padding(
               padding: const EdgeInsets.all(12),
+              decoration: const BoxDecoration(
+                color: Colors.white,
+                borderRadius: BorderRadius.vertical(
+                  bottom: Radius.circular(12),
+                ),
+              ),
               child: Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
-                  mainAxisAlignment: MainAxisAlignment.center,
                 children: [
                   Text(
                     promotion.title,
                     style: const TextStyle(
                       fontSize: 14,
-                        fontWeight: FontWeight.w600,
+                      fontWeight: FontWeight.w500,
+                      color: Color(0xFF212121),
                     ),
                     maxLines: 1,
                     overflow: TextOverflow.ellipsis,
                   ),
-                    const SizedBox(height: 4),
+                  const SizedBox(height: 2),
                   Text(
                     promotion.description,
-                      style: TextStyle(
+                    style: const TextStyle(
                       fontSize: 12,
-                        color: AppColors.grey500,
+                      color: Color(0xFF666666), // --text-muted
                     ),
-                      maxLines: 2,
+                    maxLines: 1,
                     overflow: TextOverflow.ellipsis,
                   ),
                 ],
               ),
             ),
-            ),
           ],
         ),
       ),

lib/features/home/presentation/widgets/quick_action_item.dart

@@ -34,75 +34,86 @@ class QuickActionItem extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return InkWell(
+    return Material(
+      color: Colors.white,
+      borderRadius: BorderRadius.circular(12),
+      child: InkWell(
         onTap: onTap,
         borderRadius: BorderRadius.circular(12),
         child: Container(
-        padding: const EdgeInsets.all(12),
-        child: Column(
-          mainAxisSize: MainAxisSize.min,
-          children: [
-            // Icon with optional badge
-            Stack(
-              clipBehavior: Clip.none,
-              children: [
-                Container(
-                  padding: const EdgeInsets.all(16),
           decoration: BoxDecoration(
-                    color: AppColors.primaryBlue.withOpacity(0.1),
-                    borderRadius: BorderRadius.circular(12),
-                  ),
-                  child: Icon(
-                    icon,
-                    size: 20,
-                    color: AppColors.primaryBlue,
-                  ),
-                ),
-                // Badge
-                if (badge != null && badge!.isNotEmpty)
-                  Positioned(
-                    top: -4,
-                    right: -4,
-                    child: Container(
-                      padding: const EdgeInsets.symmetric(
-                        horizontal: 6,
-                        vertical: 2,
-                      ),
-                      decoration: BoxDecoration(
-                        color: AppColors.danger,
-                        borderRadius: BorderRadius.circular(10),
-                      ),
-                      constraints: const BoxConstraints(
-                        minWidth: 20,
-                        minHeight: 20,
-                      ),
-                      child: Text(
-                        badge!,
-                        style: const TextStyle(
             color: Colors.white,
-                          fontSize: 11,
+            borderRadius: BorderRadius.circular(12),
-                          fontWeight: FontWeight.bold,
+            boxShadow: [
-                        ),
+              BoxShadow(
-                        textAlign: TextAlign.center,
+                color: Colors.black.withValues(alpha: 0.05),
-                      ),
+                blurRadius: 8,
-                    ),
+                offset: const Offset(0, 2),
               ),
             ],
           ),
+          padding: const EdgeInsets.all(16),
+          child: Stack(
+            alignment: Alignment.center, // Center the column within the stack
+            clipBehavior: Clip.none,
+            children: [
+              Column(
+                mainAxisSize: MainAxisSize.max, // Take all available space
+                mainAxisAlignment: MainAxisAlignment.center,
+                crossAxisAlignment: CrossAxisAlignment.center,
+                children: [
+                  // Icon
+                  Icon(
+                    icon,
+                    size: 32,
+                    color: AppColors.primaryBlue,
+                  ),
                   const SizedBox(height: 8),
                   // Label
                   Text(
                     label,
                     style: const TextStyle(
-                fontSize: 12,
+                      fontSize: 16,
                       fontWeight: FontWeight.w500,
+                      color: Color(0xFF212121), // --text-dark
                     ),
                     textAlign: TextAlign.center,
-              maxLines: 2,
+                    maxLines: 1,
                     overflow: TextOverflow.ellipsis,
                   ),
                 ],
               ),
+              // Badge (positioned absolute like HTML)
+              if (badge != null && badge!.isNotEmpty)
+                Positioned(
+                  top: -4,
+                  right: -4,
+                  child: Container(
+                    padding: const EdgeInsets.symmetric(
+                      horizontal: 8,
+                      vertical: 4,
+                    ),
+                    decoration: BoxDecoration(
+                      color: AppColors.danger,
+                      borderRadius: BorderRadius.circular(12),
+                    ),
+                    constraints: const BoxConstraints(
+                      minWidth: 20,
+                    ),
+                    child: Text(
+                      badge!,
+                      style: const TextStyle(
+                        color: Colors.white,
+                        fontSize: 11,
+                        fontWeight: FontWeight.w700,
+                      ),
+                      textAlign: TextAlign.center,
+                    ),
+                  ),
+                ),
+            ],
+          ),
+        ),
       ),
     );
   }

lib/features/home/presentation/widgets/quick_action_section.dart

@@ -41,24 +41,41 @@ class QuickActionSection extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Card(
+    return Container(
-      margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+      margin: const EdgeInsets.only(bottom: 16),
+      decoration: BoxDecoration(
+        color: Colors.white,
+        borderRadius: BorderRadius.circular(12),
+        boxShadow: [
+          BoxShadow(
+            color: Colors.black.withValues(alpha: 0.07),
+            blurRadius: 15,
+            offset: const Offset(0, 4),
+          ),
+        ],
+      ),
       child: Padding(
         padding: const EdgeInsets.all(16),
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.start,
+          spacing: 16,
           children: [
             // Section Title
             Text(
               title,
               style: const TextStyle(
                 fontSize: 16,
-                fontWeight: FontWeight.w600,
+                fontWeight: FontWeight.w700,
+                color: Color(0xFF212121), // --text-dark
+                height: 1.0, // Reduce line height to minimize spacing
               ),
             ),
-            const SizedBox(height: 12),
+            // Action Grid (always 3 columns to match HTML)
-            // Action Grid
+            // Using Transform to remove spacing between title and grid
-            _buildActionGrid(),
+            Transform.translate(
+              offset: const Offset(0, -4),
+              child: _buildActionGrid(),
+            ),
           ],
         ),
       ),
@@ -66,17 +83,15 @@ class QuickActionSection extends StatelessWidget {
   }
 
   Widget _buildActionGrid() {
-    // Determine grid layout based on number of items
-    final int crossAxisCount = actions.length <= 2 ? 2 : 3;
-
     return GridView.builder(
+      padding: EdgeInsets.zero, // Remove default GridView padding
       shrinkWrap: true,
       physics: const NeverScrollableScrollPhysics(),
-      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
-        crossAxisCount: crossAxisCount,
+        crossAxisCount: 3, // Always 3 columns to match HTML
         childAspectRatio: 1.0,
-        crossAxisSpacing: 4,
+        crossAxisSpacing: 8,
-        mainAxisSpacing: 4,
+        mainAxisSpacing: 8,
       ),
       itemCount: actions.length,
       itemBuilder: (context, index) {