add detail, fetch products, categories

lib/features/products/presentation/pages/products_page.dart

@@ -2,13 +2,17 @@ import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import '../widgets/product_grid.dart';
 import '../widgets/product_search_bar.dart';
+import '../widgets/product_list_item.dart';
 import '../providers/products_provider.dart';
 import '../providers/selected_category_provider.dart' as product_providers;
 import '../providers/filtered_products_provider.dart';
 import '../../domain/entities/product.dart';
 import '../../../categories/presentation/providers/categories_provider.dart';
 
-/// Products page - displays all products in a grid
+/// View mode for products display
+enum ViewMode { grid, list }
+
+/// Products page - displays all products in a grid or list
 class ProductsPage extends ConsumerStatefulWidget {
   const ProductsPage({super.key});
 
@@ -18,6 +22,7 @@ class ProductsPage extends ConsumerStatefulWidget {
 
 class _ProductsPageState extends ConsumerState<ProductsPage> {
   ProductSortOption _sortOption = ProductSortOption.nameAsc;
+  ViewMode _viewMode = ViewMode.grid;
 
   @override
   Widget build(BuildContext context) {
@@ -43,6 +48,23 @@ class _ProductsPageState extends ConsumerState<ProductsPage> {
       appBar: AppBar(
         title: const Text('Products'),
         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',
+          ),
           // Sort button
           PopupMenuButton<ProductSortOption>(
             icon: const Icon(Icons.sort),
@@ -195,11 +217,13 @@ class _ProductsPageState extends ConsumerState<ProductsPage> {
                       ),
                 ),
               ),
-            // Product grid
+            // Product grid or list
             Expanded(
-              child: ProductGrid(
-                sortOption: _sortOption,
-              ),
+              child: _viewMode == ViewMode.grid
+                  ? ProductGrid(
+                      sortOption: _sortOption,
+                    )
+                  : _buildListView(),
             ),
           ],
         ),
@@ -223,4 +247,84 @@ class _ProductsPageState extends ConsumerState<ProductsPage> {
       ),
     );
   }
+
+  /// Build list view for products
+  Widget _buildListView() {
+    final filteredProducts = ref.watch(filteredProductsProvider);
+
+    // Apply sorting
+    final sortedProducts = _sortProducts(filteredProducts, _sortOption);
+
+    if (sortedProducts.isEmpty) {
+      return const Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Icon(
+              Icons.inventory_2_outlined,
+              size: 64,
+              color: Colors.grey,
+            ),
+            SizedBox(height: 16),
+            Text(
+              'No products found',
+              style: TextStyle(
+                fontSize: 16,
+                color: Colors.grey,
+              ),
+            ),
+            SizedBox(height: 8),
+            Text(
+              'Try adjusting your filters',
+              style: TextStyle(
+                fontSize: 14,
+                color: Colors.grey,
+              ),
+            ),
+          ],
+        ),
+      );
+    }
+
+    return ListView.builder(
+      padding: const EdgeInsets.symmetric(vertical: 8),
+      itemCount: sortedProducts.length,
+      itemBuilder: (context, index) {
+        return ProductListItem(
+          product: sortedProducts[index],
+          onTap: () {
+            // TODO: Navigate to product detail or add to cart
+          },
+        );
+      },
+    );
+  }
+
+  /// Sort products based on selected option
+  List<Product> _sortProducts(List<Product> products, ProductSortOption option) {
+    final sorted = List<Product>.from(products);
+
+    switch (option) {
+      case ProductSortOption.nameAsc:
+        sorted.sort((a, b) => a.name.compareTo(b.name));
+        break;
+      case ProductSortOption.nameDesc:
+        sorted.sort((a, b) => b.name.compareTo(a.name));
+        break;
+      case ProductSortOption.priceAsc:
+        sorted.sort((a, b) => a.price.compareTo(b.price));
+        break;
+      case ProductSortOption.priceDesc:
+        sorted.sort((a, b) => b.price.compareTo(a.price));
+        break;
+      case ProductSortOption.newest:
+        sorted.sort((a, b) => b.createdAt.compareTo(a.createdAt));
+        break;
+      case ProductSortOption.oldest:
+        sorted.sort((a, b) => a.createdAt.compareTo(b.createdAt));
+        break;
+    }
+
+    return sorted;
+  }
 }