feat: merchant page

lib/common/theme/theme.dart

@@ -16,19 +16,6 @@ class ThemeApp {
     fontFamily: FontFamily.quicksand,
     primaryColor: AppColor.primary,
     scaffoldBackgroundColor: AppColor.white,
-    textTheme: TextTheme(
-      bodySmall: AppStyle.xs,
-      bodyMedium: AppStyle.md,
-      bodyLarge: AppStyle.lg,
-      labelSmall: AppStyle.sm,
-      labelLarge: AppStyle.xl,
-      headlineSmall: AppStyle.h6,
-      headlineMedium: AppStyle.h5,
-      headlineLarge: AppStyle.h4,
-      displaySmall: AppStyle.h3,
-      displayMedium: AppStyle.h2,
-      displayLarge: AppStyle.h1,
-    ),
     appBarTheme: AppBarTheme(
       backgroundColor: AppColor.white,
       foregroundColor: AppColor.textPrimary,

lib/presentation/pages/merchant/merchant_page.dart

@@ -19,11 +19,14 @@ class _MerchantPageState extends State<MerchantPage> {
   final TextEditingController _searchController = TextEditingController();
   final List<MerchantModel> _allMerchants = _generateMockMerchants();
   List<MerchantModel> _filteredMerchants = [];
+  String? _selectedCategory;
+  late List<String> _categories;
 
   @override
   void initState() {
     super.initState();
     _filteredMerchants = _allMerchants;
+    _categories = _getAllCategories();
   }
 
   @override
@@ -32,12 +35,29 @@ class _MerchantPageState extends State<MerchantPage> {
     super.dispose();
   }
 
+  List<String> _getAllCategories() {
+    final categories = _allMerchants
+        .map((merchant) => merchant.category)
+        .toSet()
+        .toList();
+    categories.sort();
+    return categories;
+  }
+
   void _filterMerchants(String query) {
     setState(() {
-      if (query.isEmpty) {
+      var merchants = _allMerchants;
-        _filteredMerchants = _allMerchants;
+
-      } else {
+      // Filter by category first
-        _filteredMerchants = _allMerchants
+      if (_selectedCategory != null) {
+        merchants = merchants
+            .where((merchant) => merchant.category == _selectedCategory)
+            .toList();
+      }
+
+      // Then filter by search query
+      if (query.isNotEmpty) {
+        merchants = merchants
             .where(
               (merchant) =>
                   merchant.name.toLowerCase().contains(query.toLowerCase()) ||
@@ -45,26 +65,98 @@ class _MerchantPageState extends State<MerchantPage> {
             )
             .toList();
       }
+
+      _filteredMerchants = merchants;
     });
   }
 
+  void _onCategorySelected(String? category) {
+    setState(() {
+      _selectedCategory = category;
+    });
+    _filterMerchants(_searchController.text);
+  }
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       backgroundColor: AppColor.background,
       appBar: AppBar(
-        title: Text('Merchants'),
+        title: const Text('Merchants'),
         bottom: PreferredSize(
-          preferredSize: const Size.fromHeight(70),
+          preferredSize: const Size.fromHeight(
-          child: SearchTextField(
+            130,
+          ), // Increased height for filter chips
+          child: Column(
+            children: [
+              // Search Field
+              SearchTextField(
                 hintText: 'Search merchants...',
                 prefixIcon: Icons.search,
                 controller: _searchController,
+                // onChanged: _filterMerchants,
                 onClear: () {
                   _searchController.clear();
                   _filterMerchants('');
                 },
               ),
+              const SizedBox(height: 12),
+              // Category Filter Chips
+              // Category Filter Chips - Updated with AppColor and opacity 1
+              Container(
+                height: 40,
+                padding: const EdgeInsets.symmetric(horizontal: 16),
+                child: ListView(
+                  scrollDirection: Axis.horizontal,
+                  children: [
+                    // "All" filter chip
+                    Padding(
+                      padding: const EdgeInsets.only(right: 8),
+                      child: FilterChip(
+                        label: const Text('All'),
+                        selected: _selectedCategory == null,
+                        onSelected: (selected) {
+                          _onCategorySelected(null);
+                        },
+                        selectedColor: AppColor.primary,
+                        backgroundColor: AppColor.white,
+                        checkmarkColor: AppColor.white,
+                        labelStyle: TextStyle(
+                          color: _selectedCategory == null
+                              ? AppColor.white
+                              : AppColor.primary,
+                        ),
+                        side: BorderSide(color: AppColor.primary, width: 1),
+                      ),
+                    ),
+                    // Category filter chips
+                    ..._categories.map(
+                      (category) => Padding(
+                        padding: const EdgeInsets.only(right: 8),
+                        child: FilterChip(
+                          label: Text(category),
+                          selected: _selectedCategory == category,
+                          onSelected: (selected) {
+                            _onCategorySelected(selected ? category : null);
+                          },
+                          selectedColor: AppColor.primary,
+                          backgroundColor: AppColor.white,
+                          checkmarkColor: AppColor.white,
+                          labelStyle: TextStyle(
+                            color: _selectedCategory == category
+                                ? AppColor.white
+                                : AppColor.primary,
+                          ),
+                          side: BorderSide(color: AppColor.primary, width: 1),
+                        ),
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+              const SizedBox(height: 8),
+            ],
+          ),
         ),
       ),
       body: _filteredMerchants.isEmpty