add detail, fetch products, categories

lib/features/categories/presentation/pages/category_detail_page.dart

@@ -0,0 +1,169 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import '../../domain/entities/category.dart';
+import '../../../products/presentation/providers/products_provider.dart';
+import '../../../products/presentation/widgets/product_card.dart';
+import '../../../products/presentation/widgets/product_list_item.dart';
+
+/// View mode for products display
+enum ViewMode { grid, list }
+
+/// Category detail page showing products in the category
+class CategoryDetailPage extends ConsumerStatefulWidget {
+  final Category category;
+
+  const CategoryDetailPage({
+    super.key,
+    required this.category,
+  });
+
+  @override
+  ConsumerState<CategoryDetailPage> createState() => _CategoryDetailPageState();
+}
+
+class _CategoryDetailPageState extends ConsumerState<CategoryDetailPage> {
+  ViewMode _viewMode = ViewMode.grid;
+
+  @override
+  Widget build(BuildContext context) {
+    final productsAsync = ref.watch(productsProvider);
+
+    return Scaffold(
+      appBar: AppBar(
+        title: Text(widget.category.name),
+        actions: [
+          // View mode toggle
+          IconButton(
+            icon: Icon(
+              _viewMode == ViewMode.grid
+                  ? Icons.view_list_rounded
+                  : Icons.grid_view_rounded,
+            ),
+            onPressed: () {
+              setState(() {
+                _viewMode =
+                    _viewMode == ViewMode.grid ? ViewMode.list : ViewMode.grid;
+              });
+            },
+            tooltip: _viewMode == ViewMode.grid
+                ? 'Switch to list view'
+                : 'Switch to grid view',
+          ),
+        ],
+      ),
+      body: productsAsync.when(
+        data: (products) {
+          // Filter products by category
+          final categoryProducts = products
+              .where((product) => product.categoryId == widget.category.id)
+              .toList();
+
+          if (categoryProducts.isEmpty) {
+            return Center(
+              child: Column(
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  Icon(
+                    Icons.inventory_2_outlined,
+                    size: 64,
+                    color: Theme.of(context).colorScheme.onSurfaceVariant,
+                  ),
+                  const SizedBox(height: 16),
+                  Text(
+                    'No products in this category',
+                    style: Theme.of(context).textTheme.titleMedium?.copyWith(
+                          color: Theme.of(context).colorScheme.onSurfaceVariant,
+                        ),
+                  ),
+                  const SizedBox(height: 8),
+                  Text(
+                    'Products will appear here once added',
+                    style: Theme.of(context).textTheme.bodySmall?.copyWith(
+                          color: Theme.of(context).colorScheme.onSurfaceVariant,
+                        ),
+                  ),
+                ],
+              ),
+            );
+          }
+
+          return RefreshIndicator(
+            onRefresh: () async {
+              await ref.read(productsProvider.notifier).syncProducts();
+            },
+            child: _viewMode == ViewMode.grid
+                ? _buildGridView(categoryProducts)
+                : _buildListView(categoryProducts),
+          );
+        },
+        loading: () => const Center(
+          child: CircularProgressIndicator(),
+        ),
+        error: (error, stack) => Center(
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              Icon(
+                Icons.error_outline,
+                size: 64,
+                color: Theme.of(context).colorScheme.error,
+              ),
+              const SizedBox(height: 16),
+              Text(
+                'Error loading products',
+                style: Theme.of(context).textTheme.titleMedium,
+              ),
+              const SizedBox(height: 8),
+              Text(
+                error.toString(),
+                style: Theme.of(context).textTheme.bodySmall,
+                textAlign: TextAlign.center,
+              ),
+              const SizedBox(height: 16),
+              FilledButton.icon(
+                onPressed: () {
+                  ref.invalidate(productsProvider);
+                },
+                icon: const Icon(Icons.refresh),
+                label: const Text('Retry'),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  /// Build grid view
+  Widget _buildGridView(List products) {
+    return GridView.builder(
+      padding: const EdgeInsets.all(16),
+      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+        crossAxisCount: 2,
+        childAspectRatio: 0.75,
+        crossAxisSpacing: 12,
+        mainAxisSpacing: 12,
+      ),
+      itemCount: products.length,
+      itemBuilder: (context, index) {
+        return ProductCard(product: products[index]);
+      },
+    );
+  }
+
+  /// Build list view
+  Widget _buildListView(List products) {
+    return ListView.builder(
+      padding: const EdgeInsets.symmetric(vertical: 8),
+      itemCount: products.length,
+      itemBuilder: (context, index) {
+        return ProductListItem(
+          product: products[index],
+          onTap: () {
+            // TODO: Navigate to product detail or add to cart
+          },
+        );
+      },
+    );
+  }
+}

lib/features/categories/presentation/providers/categories_provider.dart

@@ -1,31 +1,92 @@
 import 'package:riverpod_annotation/riverpod_annotation.dart';
 import '../../domain/entities/category.dart';
+import '../../data/providers/category_providers.dart';
+import '../../../../core/providers/providers.dart';
 
 part 'categories_provider.g.dart';
 
-/// Provider for categories list
+/// Provider for categories list with API-first approach
 @riverpod
 class Categories extends _$Categories {
   @override
   Future<List<Category>> build() async {
-    // TODO: Implement with repository
-    return [];
+    // API-first: Try to load from API first
+    final repository = ref.watch(categoryRepositoryProvider);
+    final networkInfo = ref.watch(networkInfoProvider);
+
+    // Check if online
+    final isConnected = await networkInfo.isConnected;
+
+    if (isConnected) {
+      // Try API first
+      try {
+        final syncResult = await repository.syncCategories();
+        return syncResult.fold(
+          (failure) {
+            // API failed, fallback to cache
+            print('Categories API failed, falling back to cache: ${failure.message}');
+            return _loadFromCache();
+          },
+          (categories) => categories,
+        );
+      } catch (e) {
+        // API error, fallback to cache
+        print('Categories API error, falling back to cache: $e');
+        return _loadFromCache();
+      }
+    } else {
+      // Offline, load from cache
+      print('Offline, loading categories from cache');
+      return _loadFromCache();
+    }
   }
 
+  /// Load categories from local cache
+  Future<List<Category>> _loadFromCache() async {
+    final repository = ref.read(categoryRepositoryProvider);
+    final result = await repository.getAllCategories();
+
+    return result.fold(
+      (failure) {
+        print('Categories cache load failed: ${failure.message}');
+        return <Category>[];
+      },
+      (categories) => categories,
+    );
+  }
+
+  /// Refresh categories from local storage
   Future<void> refresh() async {
     state = const AsyncValue.loading();
     state = await AsyncValue.guard(() async {
-      // Fetch categories from repository
-      return [];
+      final repository = ref.read(categoryRepositoryProvider);
+      final result = await repository.getAllCategories();
+
+      return result.fold(
+        (failure) => throw Exception(failure.message),
+        (categories) => categories,
+      );
     });
   }
 
+  /// Sync categories from API and update local storage
   Future<void> syncCategories() async {
-    // TODO: Implement sync logic with remote data source
+    final networkInfo = ref.read(networkInfoProvider);
+    final isConnected = await networkInfo.isConnected;
+
+    if (!isConnected) {
+      throw Exception('No internet connection');
+    }
+
     state = const AsyncValue.loading();
     state = await AsyncValue.guard(() async {
-      // Sync categories from API
-      return [];
+      final repository = ref.read(categoryRepositoryProvider);
+      final result = await repository.syncCategories();
+
+      return result.fold(
+        (failure) => throw Exception(failure.message),
+        (categories) => categories,
+      );
     });
   }
 }

lib/features/categories/presentation/providers/categories_provider.g.dart

@@ -8,15 +8,15 @@ part of 'categories_provider.dart';
 
 // GENERATED CODE - DO NOT MODIFY BY HAND
 // ignore_for_file: type=lint, type=warning
-/// Provider for categories list
+/// Provider for categories list with API-first approach
 
 @ProviderFor(Categories)
 const categoriesProvider = CategoriesProvider._();
 
-/// Provider for categories list
+/// Provider for categories list with API-first approach
 final class CategoriesProvider
     extends $AsyncNotifierProvider<Categories, List<Category>> {
-  /// Provider for categories list
+  /// Provider for categories list with API-first approach
   const CategoriesProvider._()
     : super(
         from: null,
@@ -36,9 +36,9 @@ final class CategoriesProvider
   Categories create() => Categories();
 }
 
-String _$categoriesHash() => r'aa7afc38a5567b0f42ff05ca23b287baa4780cbe';
+String _$categoriesHash() => r'33c33b08f8926e5bbbd112285591c74a3ff0f61c';
 
-/// Provider for categories list
+/// Provider for categories list with API-first approach
 
 abstract class _$Categories extends $AsyncNotifier<List<Category>> {
   FutureOr<List<Category>> build();

lib/features/categories/presentation/widgets/category_card.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import '../../domain/entities/category.dart';
+import '../pages/category_detail_page.dart';
 
 /// Category card widget
 class CategoryCard extends StatelessWidget {
@@ -20,7 +21,13 @@ class CategoryCard extends StatelessWidget {
       color: color,
       child: InkWell(
         onTap: () {
-          // TODO: Filter products by category
+          // Navigate to category detail page
+          Navigator.push(
+            context,
+            MaterialPageRoute(
+              builder: (context) => CategoryDetailPage(category: category),
+            ),
+          );
         },
         child: Padding(
           padding: const EdgeInsets.all(16.0),