feat: draw page

lib/presentation/components/image/image.dart

@@ -1,7 +1,10 @@
+import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
+import 'package:shimmer/shimmer.dart';
 import 'dart:math' as math;
 
 import '../../../common/theme/theme.dart';
 import '../assets/assets.gen.dart';
 
 part 'image_placeholder.dart';
+part 'network_image.dart';

lib/presentation/components/image/network_image.dart

@@ -0,0 +1,61 @@
+part of 'image.dart';
+
+class AppNetworkImage extends StatelessWidget {
+  final String? url;
+  final double? height;
+  final double? width;
+  final double? borderRadius;
+  final BoxFit? fit;
+  final bool? isCanZoom;
+  final VoidCallback? onTap;
+
+  const AppNetworkImage({
+    super.key,
+    this.url,
+    this.height,
+    this.width,
+    this.borderRadius = 0,
+    this.fit = BoxFit.cover,
+    this.isCanZoom = false,
+    this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    Widget customPhoto(
+      double? heightx,
+      double? widthx,
+      BoxFit? fitx,
+      double? radius,
+    ) {
+      return CachedNetworkImage(
+        imageUrl: url.toString(),
+        placeholder: (context, url) => Shimmer.fromColors(
+          baseColor: Colors.grey[300]!,
+          highlightColor: Colors.grey[100]!,
+          child: Container(
+            height: height,
+            width: width,
+            decoration: BoxDecoration(
+              color: Colors.grey.shade300,
+              borderRadius: BorderRadius.circular(radius ?? 0),
+            ),
+          ),
+        ),
+        errorWidget: (context, url, error) =>
+            ImagePlaceholder(height: height, width: width),
+        height: heightx,
+        width: widthx,
+        fit: fitx,
+      );
+    }
+
+    return GestureDetector(
+      onTap: onTap,
+      child: ClipRRect(
+        borderRadius: BorderRadius.circular(borderRadius!),
+        child: customPhoto(height, width, BoxFit.fill, borderRadius),
+      ),
+    );
+  }
+}

lib/presentation/pages/draw/draw_page.dart

@@ -1,7 +1,9 @@
 import 'package:auto_route/auto_route.dart';
 import 'package:flutter/material.dart';
+import 'package:carousel_slider/carousel_slider.dart';
 
 import '../../../common/theme/theme.dart';
+import '../../components/image/image.dart';
 import '../../router/app_router.gr.dart';
 
 // Models (simplified)
@@ -11,6 +13,7 @@ class DrawEvent {
   final String description;
   final int entryPoints;
   final String icon;
+  final String imageUrl;
   final Color primaryColor;
   final String prize;
   final String prizeValue;
@@ -26,6 +29,7 @@ class DrawEvent {
     required this.description,
     required this.entryPoints,
     required this.icon,
+    required this.imageUrl,
     required this.primaryColor,
     required this.prize,
     required this.prizeValue,
@@ -46,6 +50,22 @@ class UserEntry {
   UserEntry({required this.drawId, required this.entryDate});
 }
 
+class CarouselBanner {
+  final String id;
+  final String imageUrl;
+  final String title;
+  final String subtitle;
+  final Color backgroundColor;
+
+  CarouselBanner({
+    required this.id,
+    required this.imageUrl,
+    required this.title,
+    required this.subtitle,
+    required this.backgroundColor,
+  });
+}
+
 @RoutePage()
 class DrawPage extends StatefulWidget {
   const DrawPage({super.key});
@@ -55,7 +75,14 @@ class DrawPage extends StatefulWidget {
 }
 
 class _DrawPageState extends State<DrawPage> {
-  String selectedTab = 'active'; // 'active' or 'finished'
+  final TextEditingController _dateFilterController = TextEditingController();
+  final CarouselSliderController _carouselController =
+      CarouselSliderController();
+  final ScrollController _scrollController = ScrollController();
+
+  int _currentBannerIndex = 0;
+  DateTime? _selectedFilterDate;
+  bool _isCollapsed = false;
 
   final List<UserEntry> userEntries = [
     UserEntry(
@@ -64,18 +91,103 @@ class _DrawPageState extends State<DrawPage> {
     ),
   ];
 
+  final List<CarouselBanner> banners = [
+    CarouselBanner(
+      id: "1",
+      imageUrl:
+          "https://images.unsplash.com/photo-1610375461246-83df859d849d?w=800&h=400&fit=crop&crop=center",
+      title: "Gebyar Undian Emas",
+      subtitle: "Menangkan hadiah emas 3 gram!",
+      backgroundColor: Color(0xFFFF6B6B),
+    ),
+    CarouselBanner(
+      id: "2",
+      imageUrl:
+          "https://images.unsplash.com/photo-1592750475338-74b7b21085ab?w=800&h=400&fit=crop&crop=center",
+      title: "Undian iPhone 15 Pro",
+      subtitle: "Smartphone premium menanti Anda!",
+      backgroundColor: Color(0xFF4ECDC4),
+    ),
+    CarouselBanner(
+      id: "3",
+      imageUrl:
+          "https://images.unsplash.com/photo-1593640408182-31c70c8268f5?w=800&h=400&fit=crop&crop=center",
+      title: "Undian Laptop Gaming",
+      subtitle: "Laptop gaming terbaru untuk gamers!",
+      backgroundColor: Color(0xFF45B7D1),
+    ),
+    CarouselBanner(
+      id: "4",
+      imageUrl:
+          "https://images.unsplash.com/photo-1549298916-b41d501d3772?w=800&h=400&fit=crop&crop=center",
+      title: "Undian Sneakers Limited",
+      subtitle: "Sepatu branded edition terbatas!",
+      backgroundColor: Color(0xFF96CEB4),
+    ),
+    CarouselBanner(
+      id: "5",
+      imageUrl:
+          "https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=800&h=400&fit=crop&crop=center",
+      title: "Undian Camera DSLR",
+      subtitle: "Kamera profesional untuk fotografer!",
+      backgroundColor: Color(0xFFFECEA8),
+    ),
+    CarouselBanner(
+      id: "6",
+      imageUrl:
+          "https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=800&h=400&fit=crop&crop=center",
+      title: "Undian Gaming Console",
+      subtitle: "PlayStation 5 siap dimainkan!",
+      backgroundColor: Color(0xFFFF9AA2),
+    ),
+    CarouselBanner(
+      id: "7",
+      imageUrl:
+          "https://images.unsplash.com/photo-1512499617640-c74ae3a79d37?w=800&h=400&fit=crop&crop=center",
+      title: "Undian Motor Sport",
+      subtitle: "Motor sport impian Anda!",
+      backgroundColor: Color(0xFFB5EAD7),
+    ),
+    CarouselBanner(
+      id: "8",
+      imageUrl:
+          "https://images.unsplash.com/photo-1484704849700-f032a568e944?w=800&h=400&fit=crop&crop=center",
+      title: "Undian Home Theater",
+      subtitle: "Sistem audio premium untuk rumah!",
+      backgroundColor: Color(0xFFC7CEDB),
+    ),
+    CarouselBanner(
+      id: "9",
+      imageUrl:
+          "https://images.unsplash.com/photo-1434493789847-2f02dc6ca35d?w=800&h=400&fit=crop&crop=center",
+      title: "Undian Luxury Watch",
+      subtitle: "Jam tangan mewah Swiss Made!",
+      backgroundColor: Color(0xFFFFB7B2),
+    ),
+    CarouselBanner(
+      id: "10",
+      imageUrl:
+          "https://images.unsplash.com/photo-1558618666-fbd1c326d4a4?w=800&h=400&fit=crop&crop=center",
+      title: "Undian Travel Voucher",
+      subtitle: "Liburan gratis ke destinasi impian!",
+      backgroundColor: Color(0xFFE2F0CB),
+    ),
+  ];
+
   final List<DrawEvent> drawEvents = [
     DrawEvent(
       id: "1",
       name: "Emas 3 Gram",
-      description: "Gebyar Undian Enaklo\nMenangkan hadiah menarik",
+      description: "Gebyar Undian Enaklo\nMenangkan hadiah emas batangan",
       entryPoints: 0,
       icon: "👑",
+      imageUrl:
+          "https://images.unsplash.com/photo-1610375461246-83df859d849d?w=400&h=200&fit=crop&crop=center",
       primaryColor: AppColor.primary,
       prize: "Emas 3 Gram",
       prizeValue: "Rp 2.500.000",
       drawDate: DateTime.now().add(Duration(hours: 1, minutes: 20)),
-      totalParticipants: 0,
+      totalParticipants: 245,
       hadiah: 2,
       status: 'active',
       minSpending: 50000,
@@ -86,25 +198,193 @@ class _DrawPageState extends State<DrawPage> {
       description: "Undian Smartphone Premium\nDapatkan iPhone terbaru",
       entryPoints: 0,
       icon: "📱",
-      primaryColor: AppColor.info,
+      imageUrl:
+          "https://images.unsplash.com/photo-1592750475338-74b7b21085ab?w=400&h=200&fit=crop&crop=center",
+      primaryColor: Color(0xFF007AFF),
       prize: "iPhone 15 Pro",
       prizeValue: "Rp 18.000.000",
-      drawDate: DateTime.now().subtract(Duration(days: 1)),
+      drawDate: DateTime.now().add(Duration(days: 2)),
-      totalParticipants: 156,
+      totalParticipants: 1456,
       hadiah: 1,
-      status: 'ended',
+      status: 'active',
       minSpending: 100000,
     ),
+    DrawEvent(
+      id: "3",
+      name: "Laptop Gaming",
+      description: "Undian Laptop Gaming ROG\nPerforma tinggi untuk gaming",
+      entryPoints: 0,
+      icon: "💻",
+      imageUrl:
+          "https://images.unsplash.com/photo-1593640408182-31c70c8268f5?w=400&h=200&fit=crop&crop=center",
+      primaryColor: Color(0xFFFF4444),
+      prize: "ROG Strix G15",
+      prizeValue: "Rp 15.000.000",
+      drawDate: DateTime.now().add(Duration(days: 5)),
+      totalParticipants: 892,
+      hadiah: 1,
+      status: 'active',
+      minSpending: 75000,
+    ),
+    DrawEvent(
+      id: "4",
+      name: "Sneakers Limited",
+      description: "Undian Sepatu Nike Air Jordan\nEdition terbatas collectors",
+      entryPoints: 0,
+      icon: "👟",
+      imageUrl:
+          "https://images.unsplash.com/photo-1549298916-b41d501d3772?w=400&h=200&fit=crop&crop=center",
+      primaryColor: Color(0xFF32CD32),
+      prize: "Nike Air Jordan",
+      prizeValue: "Rp 3.500.000",
+      drawDate: DateTime.now().add(Duration(days: 3)),
+      totalParticipants: 567,
+      hadiah: 3,
+      status: 'active',
+      minSpending: 30000,
+    ),
+    DrawEvent(
+      id: "5",
+      name: "Camera DSLR",
+      description:
+          "Undian Kamera Canon EOS\nKamera profesional untuk fotografer",
+      entryPoints: 0,
+      icon: "📷",
+      imageUrl:
+          "https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=400&h=200&fit=crop&crop=center",
+      primaryColor: Color(0xFF8B4513),
+      prize: "Canon EOS R5",
+      prizeValue: "Rp 25.000.000",
+      drawDate: DateTime.now().add(Duration(days: 7)),
+      totalParticipants: 334,
+      hadiah: 1,
+      status: 'active',
+      minSpending: 150000,
+    ),
+    DrawEvent(
+      id: "6",
+      name: "PlayStation 5",
+      description: "Undian Gaming Console\nPS5 bundle dengan 3 games",
+      entryPoints: 0,
+      icon: "🎮",
+      imageUrl:
+          "https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=400&h=200&fit=crop&crop=center",
+      primaryColor: Color(0xFF0070D1),
+      prize: "PlayStation 5",
+      prizeValue: "Rp 8.500.000",
+      drawDate: DateTime.now().add(Duration(days: 4)),
+      totalParticipants: 1789,
+      hadiah: 2,
+      status: 'active',
+      minSpending: 60000,
+    ),
+    DrawEvent(
+      id: "7",
+      name: "Motor Yamaha R15",
+      description: "Undian Motor Sport\nYamaha R15 V4 warna special edition",
+      entryPoints: 0,
+      icon: "🏍️",
+      imageUrl:
+          "https://images.unsplash.com/photo-1512499617640-c74ae3a79d37?w=400&h=200&fit=crop&crop=center",
+      primaryColor: Color(0xFFDC143C),
+      prize: "Yamaha R15 V4",
+      prizeValue: "Rp 35.000.000",
+      drawDate: DateTime.now().add(Duration(days: 10)),
+      totalParticipants: 456,
+      hadiah: 1,
+      status: 'active',
+      minSpending: 200000,
+    ),
+    DrawEvent(
+      id: "8",
+      name: "Home Theater",
+      description: "Undian Sound System\nSony Home Theater 7.1 surround",
+      entryPoints: 0,
+      icon: "🔊",
+      imageUrl:
+          "https://images.unsplash.com/photo-1484704849700-f032a568e944?w=400&h=200&fit=crop&crop=center",
+      primaryColor: Color(0xFF4B0082),
+      prize: "Sony HT-A7000",
+      prizeValue: "Rp 12.000.000",
+      drawDate: DateTime.now().add(Duration(days: 6)),
+      totalParticipants: 298,
+      hadiah: 1,
+      status: 'active',
+      minSpending: 80000,
+    ),
+    DrawEvent(
+      id: "9",
+      name: "Luxury Watch",
+      description: "Undian Jam Tangan Mewah\nRolex Submariner Swiss Made",
+      entryPoints: 0,
+      icon: "⌚",
+      imageUrl:
+          "https://images.unsplash.com/photo-1434493789847-2f02dc6ca35d?w=400&h=200&fit=crop&crop=center",
+      primaryColor: Color(0xFFB8860B),
+      prize: "Rolex Submariner",
+      prizeValue: "Rp 150.000.000",
+      drawDate: DateTime.now().add(Duration(days: 14)),
+      totalParticipants: 123,
+      hadiah: 1,
+      status: 'active',
+      minSpending: 500000,
+    ),
+    DrawEvent(
+      id: "10",
+      name: "Travel Voucher Bali",
+      description: "Undian Liburan Gratis\nPaket tour Bali 4D3N all inclusive",
+      entryPoints: 0,
+      icon: "✈️",
+      imageUrl:
+          "https://images.unsplash.com/photo-1558618666-fbd1c326d4a4?w=400&h=200&fit=crop&crop=center",
+      primaryColor: Color(0xFF20B2AA),
+      prize: "Bali Tour Package",
+      prizeValue: "Rp 10.000.000",
+      drawDate: DateTime.now().subtract(Duration(days: 2)),
+      totalParticipants: 2156,
+      hadiah: 5,
+      status: 'ended',
+      minSpending: 40000,
+    ),
   ];
 
+  @override
+  void initState() {
+    super.initState();
+    _scrollController.addListener(_onScroll);
+  }
+
+  @override
+  void dispose() {
+    _dateFilterController.dispose();
+    _scrollController.dispose();
+    super.dispose();
+  }
+
+  void _onScroll() {
+    final bool isCollapsed =
+        _scrollController.hasClients &&
+        _scrollController.offset > (280 - kToolbarHeight);
+
+    if (_isCollapsed != isCollapsed) {
+      setState(() {
+        _isCollapsed = isCollapsed;
+      });
+    }
+  }
+
   List<DrawEvent> get filteredDraws {
-    return drawEvents.where((draw) {
+    List<DrawEvent> filtered = drawEvents;
-      if (selectedTab == 'active') {
+
-        return draw.isActive;
+    if (_selectedFilterDate != null) {
-      } else {
+      filtered = filtered.where((draw) {
-        return !draw.isActive;
+        return draw.drawDate.year == _selectedFilterDate!.year &&
-      }
+            draw.drawDate.month == _selectedFilterDate!.month &&
-    }).toList();
+            draw.drawDate.day == _selectedFilterDate!.day;
+      }).toList();
+    }
+
+    return filtered;
   }
 
   String _getTimeRemaining(DateTime targetDate) {
@@ -122,92 +402,205 @@ class _DrawPageState extends State<DrawPage> {
     }
   }
 
+  Future<void> _selectDate() async {
+    final DateTime? picked = await showDatePicker(
+      context: context,
+      initialDate: _selectedFilterDate ?? DateTime.now(),
+      firstDate: DateTime.now().subtract(Duration(days: 365)),
+      lastDate: DateTime.now().add(Duration(days: 365)),
+    );
+
+    if (picked != null) {
+      setState(() {
+        _selectedFilterDate = picked;
+        _dateFilterController.text =
+            "${picked.day}/${picked.month}/${picked.year}";
+      });
+    }
+  }
+
+  void _clearDateFilter() {
+    setState(() {
+      _selectedFilterDate = null;
+      _dateFilterController.clear();
+    });
+  }
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       backgroundColor: AppColor.background,
-      appBar: AppBar(title: Text("Undian")),
+      body: CustomScrollView(
-      body: Column(
+        controller: _scrollController,
-        children: [
+        slivers: [
-          // Tab selector
+          // SliverAppBar with Carousel Background
-          Container(
+          SliverAppBar(
-            margin: EdgeInsets.all(16),
+            expandedHeight: 280,
-            decoration: BoxDecoration(
+            floating: false,
-              color: AppColor.surface,
+            pinned: true,
-              borderRadius: BorderRadius.circular(25),
+            backgroundColor: AppColor.surface,
-              boxShadow: [
+            leading: Container(
-                BoxShadow(
+              margin: EdgeInsets.all(8),
-                  color: AppColor.black.withOpacity(0.05),
+              decoration: BoxDecoration(
-                  blurRadius: 8,
+                color: Colors.black.withOpacity(0.3),
-                  offset: Offset(0, 2),
+                borderRadius: BorderRadius.circular(20),
-                ),
+              ),
-              ],
+              child: IconButton(
+                icon: Icon(Icons.arrow_back, color: Colors.white),
+                onPressed: () => Navigator.of(context).pop(),
+              ),
             ),
-            child: Row(
+            flexibleSpace: FlexibleSpaceBar(
-              children: [
+              title: AnimatedOpacity(
-                Expanded(
+                opacity: _isCollapsed ? 1.0 : 0.0,
-                  child: GestureDetector(
+                duration: Duration(milliseconds: 200),
-                    onTap: () => setState(() => selectedTab = 'active'),
+                child: Text(
-                    child: Container(
+                  "Undian",
-                      padding: EdgeInsets.symmetric(vertical: 12),
+                  style: AppStyle.lg.copyWith(
-                      decoration: BoxDecoration(
+                    fontWeight: FontWeight.w600,
-                        color: selectedTab == 'active'
+                    color: AppColor.textPrimary,
-                            ? AppColor.primary
-                            : Colors.transparent,
-                        borderRadius: BorderRadius.circular(25),
-                      ),
-                      child: Text(
-                        "Aktif (${drawEvents.where((d) => d.isActive).length})",
-                        textAlign: TextAlign.center,
-                        style: AppStyle.md.copyWith(
-                          color: selectedTab == 'active'
-                              ? AppColor.textWhite
-                              : AppColor.textSecondary,
-                          fontWeight: FontWeight.w600,
-                        ),
-                      ),
-                    ),
                   ),
                 ),
-                Expanded(
+              ),
-                  child: GestureDetector(
+              titlePadding: EdgeInsets.only(left: 72, bottom: 16),
-                    onTap: () => setState(() => selectedTab = 'finished'),
+              collapseMode: CollapseMode.parallax,
-                    child: Container(
+              background: Stack(
-                      padding: EdgeInsets.symmetric(vertical: 12),
+                children: [
-                      decoration: BoxDecoration(
+                  // Carousel Slider
-                        color: selectedTab == 'finished'
+                  Positioned.fill(
-                            ? AppColor.primary
+                    child: CarouselSlider.builder(
-                            : Colors.transparent,
+                      carouselController: _carouselController,
-                        borderRadius: BorderRadius.circular(25),
+                      itemCount: banners.length,
-                      ),
+                      options: CarouselOptions(
-                      child: Text(
+                        height: double.infinity,
-                        "Selesai (${drawEvents.where((d) => !d.isActive).length})",
+                        viewportFraction: 1.0,
-                        textAlign: TextAlign.center,
+                        autoPlay: true,
-                        style: AppStyle.md.copyWith(
+                        autoPlayInterval: Duration(seconds: 4),
-                          color: selectedTab == 'finished'
+                        autoPlayAnimationDuration: Duration(milliseconds: 800),
-                              ? AppColor.textWhite
+                        onPageChanged: (index, reason) {
-                              : AppColor.textSecondary,
+                          setState(() => _currentBannerIndex = index);
-                          fontWeight: FontWeight.w600,
+                        },
-                        ),
                       ),
+                      itemBuilder: (context, index, realIndex) {
+                        final banner = banners[index];
+                        return GestureDetector(
+                          onTap: () {
+                            context.router.push(DrawDetailRoute());
+                          },
+                          child: AppNetworkImage(url: banner.imageUrl),
+                        );
+                      },
                     ),
                   ),
-                ),
+
-              ],
+                  // Page indicators
+                  Positioned(
+                    bottom: 20,
+                    left: 0,
+                    right: 0,
+                    child: Row(
+                      mainAxisAlignment: MainAxisAlignment.center,
+                      children: banners.asMap().entries.map((entry) {
+                        return GestureDetector(
+                          onTap: () =>
+                              _carouselController.animateToPage(entry.key),
+                          child: Container(
+                            width: _currentBannerIndex == entry.key ? 24 : 8,
+                            height: 8,
+                            margin: EdgeInsets.symmetric(horizontal: 4),
+                            decoration: BoxDecoration(
+                              borderRadius: BorderRadius.circular(4),
+                              color: _currentBannerIndex == entry.key
+                                  ? Colors.white
+                                  : Colors.white.withOpacity(0.4),
+                            ),
+                          ),
+                        );
+                      }).toList(),
+                    ),
+                  ),
+                ],
+              ),
             ),
           ),
 
-          // Draw list
+          // Date Filter
-          Expanded(
+          SliverToBoxAdapter(
-            child: ListView.builder(
+            child: Container(
-              padding: EdgeInsets.symmetric(horizontal: 16),
+              margin: EdgeInsets.all(16),
-              itemCount: filteredDraws.length,
+              child: TextFormField(
-              itemBuilder: (context, index) {
+                controller: _dateFilterController,
-                final draw = filteredDraws[index];
+                readOnly: true,
-                return _buildSimpleDrawCard(draw);
+                onTap: _selectDate,
-              },
+                decoration: InputDecoration(
+                  hintText: "Filter berdasarkan tanggal",
+                  hintStyle: AppStyle.md.copyWith(
+                    color: AppColor.textSecondary,
+                  ),
+                  prefixIcon: Icon(
+                    Icons.calendar_today,
+                    color: AppColor.textSecondary,
+                  ),
+                  suffixIcon: _selectedFilterDate != null
+                      ? IconButton(
+                          icon: Icon(
+                            Icons.clear,
+                            color: AppColor.textSecondary,
+                          ),
+                          onPressed: _clearDateFilter,
+                        )
+                      : null,
+                  border: OutlineInputBorder(
+                    borderRadius: BorderRadius.circular(12),
+                    borderSide: BorderSide(color: AppColor.border),
+                  ),
+                  enabledBorder: OutlineInputBorder(
+                    borderRadius: BorderRadius.circular(12),
+                    borderSide: BorderSide(color: AppColor.border),
+                  ),
+                  focusedBorder: OutlineInputBorder(
+                    borderRadius: BorderRadius.circular(12),
+                    borderSide: BorderSide(color: AppColor.primary, width: 2),
+                  ),
+                  filled: true,
+                  fillColor: AppColor.surface,
+                  contentPadding: EdgeInsets.symmetric(
+                    horizontal: 16,
+                    vertical: 14,
+                  ),
+                ),
+                style: AppStyle.md.copyWith(color: AppColor.textPrimary),
+              ),
             ),
           ),
+
+          // Draw List Header
+          SliverToBoxAdapter(
+            child: Padding(
+              padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+              child: Text(
+                "Daftar Undian (${filteredDraws.length})",
+                style: AppStyle.lg.copyWith(
+                  fontWeight: FontWeight.w600,
+                  color: AppColor.textPrimary,
+                ),
+              ),
+            ),
+          ),
+
+          // Draw List
+          SliverList(
+            delegate: SliverChildBuilderDelegate((context, index) {
+              final draw = filteredDraws[index];
+              return Container(
+                margin: EdgeInsets.symmetric(horizontal: 16, vertical: 4),
+                child: _buildSimpleDrawCard(draw),
+              );
+            }, childCount: filteredDraws.length),
+          ),
+
+          // Bottom padding
+          SliverToBoxAdapter(child: SizedBox(height: 100)),
         ],
       ),
     );
@@ -220,14 +613,14 @@ class _DrawPageState extends State<DrawPage> {
       onTap: () => context.router.push(DrawDetailRoute()),
       child: Container(
         margin: EdgeInsets.only(bottom: 8),
-        padding: EdgeInsets.all(12),
+        padding: EdgeInsets.all(16),
         decoration: BoxDecoration(
           gradient: LinearGradient(
             colors: [draw.primaryColor, draw.primaryColor.withOpacity(0.8)],
             begin: Alignment.topLeft,
             end: Alignment.bottomRight,
           ),
-          borderRadius: BorderRadius.circular(8),
+          borderRadius: BorderRadius.circular(12),
           boxShadow: [
             BoxShadow(
               color: AppColor.black.withOpacity(0.08),
@@ -245,39 +638,63 @@ class _DrawPageState extends State<DrawPage> {
                   // Name
                   Text(
                     draw.name,
-                    style: AppStyle.md.copyWith(
+                    style: AppStyle.lg.copyWith(
                       fontWeight: FontWeight.w600,
                       color: AppColor.textWhite,
                     ),
                   ),
-                  SizedBox(height: 4),
+                  SizedBox(height: 6),
                   // Description
                   Text(
                     draw.description,
                     style: AppStyle.sm.copyWith(
                       color: AppColor.textWhite.withOpacity(0.9),
                     ),
-                    maxLines: 1,
+                    maxLines: 2,
                     overflow: TextOverflow.ellipsis,
                   ),
-                  SizedBox(height: 6),
+                  SizedBox(height: 8),
-                  // Date
+                  // Date and participants
-                  Text(
+                  Row(
-                    draw.isActive ? "Berakhir: $timeRemaining" : "Selesai",
+                    children: [
-                    style: AppStyle.xs.copyWith(
+                      Icon(
-                      color: AppColor.textWhite.withOpacity(0.8),
+                        Icons.access_time,
-                      fontWeight: FontWeight.w500,
+                        size: 16,
-                    ),
+                        color: AppColor.textWhite.withOpacity(0.8),
+                      ),
+                      SizedBox(width: 4),
+                      Text(
+                        draw.isActive ? "Berakhir: $timeRemaining" : "Selesai",
+                        style: AppStyle.xs.copyWith(
+                          color: AppColor.textWhite.withOpacity(0.8),
+                          fontWeight: FontWeight.w500,
+                        ),
+                      ),
+                      SizedBox(width: 16),
+                      Icon(
+                        Icons.people,
+                        size: 16,
+                        color: AppColor.textWhite.withOpacity(0.8),
+                      ),
+                      SizedBox(width: 4),
+                      Text(
+                        "${draw.totalParticipants}",
+                        style: AppStyle.xs.copyWith(
+                          color: AppColor.textWhite.withOpacity(0.8),
+                          fontWeight: FontWeight.w500,
+                        ),
+                      ),
+                    ],
                   ),
                 ],
               ),
             ),
-            // Price
+            // Prize info
             Column(
               crossAxisAlignment: CrossAxisAlignment.end,
               children: [
-                Text(draw.icon, style: AppStyle.lg),
+                Text(draw.icon, style: TextStyle(fontSize: 28)),
-                SizedBox(height: 2),
+                SizedBox(height: 4),
                 Text(
                   draw.prize,
                   style: AppStyle.sm.copyWith(
@@ -285,6 +702,13 @@ class _DrawPageState extends State<DrawPage> {
                     color: AppColor.textWhite,
                   ),
                 ),
+                Text(
+                  draw.prizeValue,
+                  style: AppStyle.xs.copyWith(
+                    color: AppColor.textWhite.withOpacity(0.8),
+                    fontWeight: FontWeight.w500,
+                  ),
+                ),
               ],
             ),
           ],

macos/Flutter/GeneratedPluginRegistrant.swift

@@ -8,11 +8,13 @@ import Foundation
 import connectivity_plus
 import path_provider_foundation
 import shared_preferences_foundation
+import sqflite_darwin
 import url_launcher_macos
 
 func RegisterGeneratedPlugins(registry: FlutterPluginRegistry) {
   ConnectivityPlusPlugin.register(with: registry.registrar(forPlugin: "ConnectivityPlusPlugin"))
   PathProviderPlugin.register(with: registry.registrar(forPlugin: "PathProviderPlugin"))
   SharedPreferencesPlugin.register(with: registry.registrar(forPlugin: "SharedPreferencesPlugin"))
+  SqflitePlugin.register(with: registry.registrar(forPlugin: "SqflitePlugin"))
   UrlLauncherPlugin.register(with: registry.registrar(forPlugin: "UrlLauncherPlugin"))
 }

pubspec.lock

@@ -137,6 +137,30 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "8.11.1"
+  cached_network_image:
+    dependency: "direct main"
+    description:
+      name: cached_network_image
+      sha256: "7c1183e361e5c8b0a0f21a28401eecdbde252441106a9816400dd4c2b2424916"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.4.1"
+  cached_network_image_platform_interface:
+    dependency: transitive
+    description:
+      name: cached_network_image_platform_interface
+      sha256: "35814b016e37fbdc91f7ae18c8caf49ba5c88501813f73ce8a07027a395e2829"
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.1.1"
+  cached_network_image_web:
+    dependency: transitive
+    description:
+      name: cached_network_image_web
+      sha256: "980842f4e8e2535b8dbd3d5ca0b1f0ba66bf61d14cc3a17a9b4788a3685ba062"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.3.1"
   carousel_slider:
     dependency: "direct main"
     description:
@@ -342,6 +366,14 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.0"
+  flutter_cache_manager:
+    dependency: transitive
+    description:
+      name: flutter_cache_manager
+      sha256: "400b6592f16a4409a7f2bb929a9a7e38c72cceb8ffb99ee57bbf2cb2cecf8386"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.4.1"
   flutter_gen_core:
     dependency: transitive
     description:
@@ -624,6 +656,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "0.5.0"
+  octo_image:
+    dependency: transitive
+    description:
+      name: octo_image
+      sha256: "34faa6639a78c7e3cbe79be6f9f96535867e879748ade7d17c9b1ae7536293bd"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.0"
   package_config:
     dependency: transitive
     description:
@@ -760,6 +800,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "4.1.0"
+  rxdart:
+    dependency: transitive
+    description:
+      name: rxdart
+      sha256: "5c3004a4a8dbb94bd4bf5412a4def4acdaa12e12f269737a5751369e12d1a962"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.28.0"
   shared_preferences:
     dependency: "direct main"
     description:
@@ -832,6 +880,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "3.0.0"
+  shimmer:
+    dependency: "direct main"
+    description:
+      name: shimmer
+      sha256: "5f88c883a22e9f9f299e5ba0e4f7e6054857224976a5d9f839d4ebdc94a14ac9"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.0.0"
   sky_engine:
     dependency: transitive
     description: flutter
@@ -861,6 +917,54 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.10.1"
+  sprintf:
+    dependency: transitive
+    description:
+      name: sprintf
+      sha256: "1fc9ffe69d4df602376b52949af107d8f5703b77cda567c4d7d86a0693120f23"
+      url: "https://pub.dev"
+    source: hosted
+    version: "7.0.0"
+  sqflite:
+    dependency: transitive
+    description:
+      name: sqflite
+      sha256: e2297b1da52f127bc7a3da11439985d9b536f75070f3325e62ada69a5c585d03
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.4.2"
+  sqflite_android:
+    dependency: transitive
+    description:
+      name: sqflite_android
+      sha256: "2b3070c5fa881839f8b402ee4a39c1b4d561704d4ebbbcfb808a119bc2a1701b"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.4.1"
+  sqflite_common:
+    dependency: transitive
+    description:
+      name: sqflite_common
+      sha256: "6ef422a4525ecc601db6c0a2233ff448c731307906e92cabc9ba292afaae16a6"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.5.6"
+  sqflite_darwin:
+    dependency: transitive
+    description:
+      name: sqflite_darwin
+      sha256: "279832e5cde3fe99e8571879498c9211f3ca6391b0d818df4e17d9fff5c6ccb3"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.4.2"
+  sqflite_platform_interface:
+    dependency: transitive
+    description:
+      name: sqflite_platform_interface
+      sha256: "8dd4515c7bdcae0a785b0062859336de775e8c65db81ae33dd5445f35be61920"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.4.0"
   stack_trace:
     dependency: transitive
     description:
@@ -893,6 +997,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.4.1"
+  synchronized:
+    dependency: transitive
+    description:
+      name: synchronized
+      sha256: c254ade258ec8282947a0acbbc90b9575b4f19673533ee46f2f6e9b3aeefd7c0
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.4.0"
   term_glyph:
     dependency: transitive
     description:
@@ -997,6 +1109,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "3.1.4"
+  uuid:
+    dependency: transitive
+    description:
+      name: uuid
+      sha256: a5be9ef6618a7ac1e964353ef476418026db906c4facdedaa299b7a2e71690ff
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.5.1"
   vector_graphics:
     dependency: transitive
     description:

pubspec.yaml

@@ -29,6 +29,8 @@ dependencies:
   shared_preferences: ^2.5.3
   carousel_slider: ^5.1.1
   url_launcher: ^6.3.2
+  cached_network_image: ^3.4.1
+  shimmer: ^3.0.0
 
 dev_dependencies:
   flutter_test: