Completed the Enhancement CR

Reviewed-on: #4

lib/config/customer_routes.dart

@@ -2,6 +2,7 @@ import 'package:car_customer_app/views/branches/branch_detail_view.dart';
 import 'package:car_customer_app/views/branches/favourite_list_view.dart';
 import 'package:car_customer_app/views/branches/provider_profile_view.dart';
 import 'package:mc_common_app/utils/enums.dart';
+import 'package:mc_common_app/views/advertisement/favourite_ads_view.dart';
 import 'package:mc_common_app/views/appointments/appointment_detail_view.dart';
 import 'package:mc_common_app/views/appointments/book_appointment_schedules_view.dart';
 import 'package:mc_common_app/views/appointments/book_appointment_services_view.dart';
@@ -29,7 +30,8 @@ class CustomerAppRoutes {
     AppRoutes.branchSearchFilterPage: (context) => BranchesFilterView(),
     AppRoutes.appoinmentSearchFilterPage: (context) => AppointmentsFilterView(),
     AppRoutes.providerProfileView: (context) => ProviderProfileView(providerId: ModalRoute.of(context)!.settings.arguments as int),
-    AppRoutes.favoriteListView: (context) => FavoriteListView(),
+    AppRoutes.favoriteProvidersView: (context) => FavouriteProvidersView(),
+    AppRoutes.favouriteAdsView: (context) => const FavouriteAdsView(),
   };
 }
 

lib/main.dart

@@ -170,6 +170,3 @@ class MyApp extends StatelessWidget {
     );
   }
 }
-
-
-

lib/views/branches/favourite_list_view.dart

@@ -18,14 +18,14 @@ import 'package:mc_common_app/widgets/common_widgets/provider_details_card.dart'
 import 'package:mc_common_app/widgets/extensions/extensions_widget.dart';
 import 'package:provider/provider.dart';
 
-class FavoriteListView extends StatefulWidget {
+class FavouriteProvidersView extends StatefulWidget {
-  const FavoriteListView({Key? key}) : super(key: key);
+  const FavouriteProvidersView({Key? key}) : super(key: key);
 
   @override
-  State<FavoriteListView> createState() => _FavoriteListViewState();
+  State<FavouriteProvidersView> createState() => _FavouriteProvidersViewState();
 }
 
-class _FavoriteListViewState extends State<FavoriteListView> {
+class _FavouriteProvidersViewState extends State<FavouriteProvidersView> {
   @override
   void initState() {
     scheduleMicrotask(() async => context.read<AppointmentsVM>().getMyFavoriteProviders());

lib/views/branches/provider_profile_view.dart

@@ -15,6 +15,7 @@ import 'package:mc_common_app/widgets/common_widgets/app_bar.dart';
 import 'package:mc_common_app/widgets/common_widgets/branch_details_card.dart';
 import 'package:mc_common_app/widgets/extensions/extensions_widget.dart';
 import 'package:provider/provider.dart';
+import 'package:sizer/sizer.dart';
 
 class ProviderProfileView extends StatefulWidget {
   final int providerId;
@@ -49,30 +50,6 @@ class _ProviderProfileViewState extends State<ProviderProfileView> {
         return Scaffold(
           appBar: CustomAppBar(
             title: LocaleKeys.providerDetails.tr(),
-            actions: [
-              Icon(
-                appointmentsVM.providerProfileModel!.isFavorite! ? Icons.favorite : Icons.favorite_border,
-                color: appointmentsVM.providerProfileModel!.isFavorite! ? MyColors.darkPrimaryColor : MyColors.black,
-              ).horPaddingMain().onPress(
-                () async {
-                  if (appointmentsVM.providerProfileModel!.isFavorite!) {
-                    bool status = await appointmentsVM.removeProviderFromFavorite(serviceProviderID: appointmentsVM.providerProfileModel!.id!, context: context);
-                    if (status) {
-                      appointmentsVM.providerProfileModel!.isFavorite = false;
-                      appointmentsVM.getMyFavoriteProviders();
-                      setState(() {});
-                    }
-                  } else {
-                    bool status = await appointmentsVM.addProviderToFavorite(serviceProviderID: appointmentsVM.providerProfileModel!.id!, context: context);
-
-                    if (status) {
-                      appointmentsVM.providerProfileModel!.isFavorite = true;
-                      setState(() {});
-                    }
-                  }
-                },
-              ),
-            ],
           ),
           body: Container(
             width: double.infinity,
@@ -84,7 +61,28 @@ class _ProviderProfileViewState extends State<ProviderProfileView> {
                   Column(
                     crossAxisAlignment: CrossAxisAlignment.start,
                     children: [
-                      Center(child: appointmentsVM.providerProfileModel!.profileImage.buildNetworkImage(height: 250, width: double.infinity, fit: BoxFit.cover)),
+                      Stack(
+                        children: [
+                          Center(
+                            child: appointmentsVM.providerProfileModel!.profileImage.buildNetworkImage(
+                              height: 250,
+                              width: double.infinity,
+                              fit: BoxFit.cover,
+                            ),
+                          ),
+                          Positioned(
+                            top: 10,
+                            right: 10,
+                            child: FavoriteProviderButton(
+                              isFavorite: appointmentsVM.providerProfileModel!.isFavorite!,
+                              serviceProviderID: appointmentsVM.providerProfileModel!.id!,
+                              onToggle: () {
+                                setState(() {});
+                              },
+                            ),
+                          ),
+                        ],
+                      ),
                       12.height,
                       if (appointmentsVM.providerProfileModel!.memberSince!.isNotEmpty) ...[
                         Row(
@@ -166,3 +164,121 @@ class _ProviderProfileViewState extends State<ProviderProfileView> {
     );
   }
 }
+
+class FavoriteProviderButton extends StatefulWidget {
+  final bool isFavorite;
+  final int serviceProviderID;
+  final VoidCallback onToggle;
+
+  const FavoriteProviderButton({
+    super.key,
+    required this.isFavorite,
+    required this.serviceProviderID,
+    required this.onToggle,
+  });
+
+  @override
+  State<FavoriteProviderButton> createState() => _FavoriteProviderButtonState();
+}
+
+class _FavoriteProviderButtonState extends State<FavoriteProviderButton> with SingleTickerProviderStateMixin {
+  bool isLoading = false;
+  late bool isFavorite;
+  late AnimationController _animationController;
+  late Animation<double> _scaleAnimation;
+
+  @override
+  void initState() {
+    super.initState();
+    isFavorite = widget.isFavorite;
+
+    _animationController = AnimationController(
+      duration: const Duration(milliseconds: 300),
+      vsync: this,
+    );
+
+    _scaleAnimation = Tween<double>(begin: 1.0, end: 1.3).animate(
+      CurvedAnimation(parent: _animationController, curve: Curves.easeInOut),
+    );
+  }
+
+  @override
+  void dispose() {
+    _animationController.dispose();
+    super.dispose();
+  }
+
+  Future<void> toggleFavorite() async {
+    if (isLoading) return;
+
+    setState(() {
+      isLoading = true;
+    });
+
+    _animationController.forward().then((_) => _animationController.reverse());
+
+    bool success;
+    if (isFavorite) {
+      success = await context.read<AppointmentsVM>().removeProviderFromFavorite(serviceProviderID: widget.serviceProviderID);
+    } else {
+      success = await context.read<AppointmentsVM>().addProviderToFavorite(serviceProviderID: widget.serviceProviderID);
+    }
+
+    if (success) {
+      setState(() {
+        isFavorite = !isFavorite;
+        isLoading = false;
+      });
+      context.read<AppointmentsVM>().providerProfileModel!.isFavorite = isFavorite;
+      if (isFavorite == false) {
+        context.read<AppointmentsVM>().getMyFavoriteProviders();
+      }
+      widget.onToggle();
+    } else {
+      setState(() {
+        isLoading = false;
+      });
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: toggleFavorite,
+      child: Container(
+        width: 8.6.w,
+        height: 8.6.w,
+        decoration: BoxDecoration(
+          color: Colors.white,
+          shape: BoxShape.circle,
+          boxShadow: [
+            BoxShadow(
+              color: const Color(0xff000000).withOpacity(.07),
+              blurRadius: 8,
+              offset: const Offset(0, 2),
+            ),
+          ],
+        ),
+        child: Center(
+          child: isLoading
+              ? SizedBox(
+                  width: 4.4.w,
+                  height: 4.4.w,
+                  child: const CircularProgressIndicator(
+                    strokeWidth: 2,
+                    valueColor: AlwaysStoppedAnimation<Color>(MyColors.darkPrimaryColor),
+                  ),
+                )
+              : ScaleTransition(
+                  scale: _scaleAnimation,
+                  child: Icon(
+                    isFavorite ? Icons.favorite : Icons.favorite_border,
+                    color: isFavorite ? Colors.red : MyColors.darkIconColor,
+                    size: 5.5.w,
+                  ),
+                ),
+        ),
+      ),
+    );
+  }
+}

lib/views/dashboard/fragments/appointments_fragment.dart

@@ -15,6 +15,7 @@ import 'package:mc_common_app/utils/navigator.dart';
 import 'package:mc_common_app/widgets/common_widgets/app_bar.dart';
 import 'package:mc_common_app/widgets/common_widgets/filters_list.dart';
 import 'package:mc_common_app/widgets/extensions/extensions_widget.dart';
+import 'package:mc_common_app/widgets/shimmer/home_shimmer_widgets.dart';
 import 'package:provider/provider.dart';
 import 'package:easy_localization/easy_localization.dart';
 
@@ -70,7 +71,7 @@ class AppointmentsFragment extends StatelessWidget {
                       }
                     },
                     child: appointmentsVM.state == ViewState.busy
-                        ? const Center(child: CircularProgressIndicator())
+                        ? const AppointmentsListShimmer(itemCount: 5)
                         : appointmentsVM.myFilteredAppointmentsForCustomers.isEmpty
                             ? AppState().getIsViewOnly
                                 ? LocaleKeys.loginToViewAppointments.tr().toText(fontSize: 16, color:  MyColors.lightTextColor)

lib/views/dashboard/fragments/branches_fragment.dart

@@ -14,6 +14,7 @@ import 'package:mc_common_app/widgets/common_widgets/app_bar.dart';
 import 'package:mc_common_app/widgets/common_widgets/branch_details_card.dart';
 import 'package:mc_common_app/widgets/common_widgets/filters_list.dart';
 import 'package:mc_common_app/widgets/extensions/extensions_widget.dart';
+import 'package:mc_common_app/widgets/shimmer/home_shimmer_widgets.dart';
 import 'package:provider/provider.dart';
 
 class BranchesFragment extends StatelessWidget {
@@ -66,9 +67,7 @@ class BranchesFragment extends StatelessWidget {
                     child: Container(
                       width: double.infinity,
                       child: appointmentsVM.state == ViewState.busy
-                          ? const Center(
+                          ? const BranchesListShimmer(itemCount: 5)
-                              child: CircularProgressIndicator(),
-                            )
                           : appointmentsVM.nearbyBranches.isEmpty
                               ? Center(
                                   child: LocaleKeys.no_branch.tr().toText(

lib/views/dashboard/fragments/home_fragment.dart

@@ -4,7 +4,10 @@ import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:mc_common_app/config/routes.dart';
 import 'package:mc_common_app/extensions/int_extensions.dart';
+import 'package:mc_common_app/extensions/string_extensions.dart';
 import 'package:mc_common_app/generated/locale_keys.g.dart';
+import 'package:mc_common_app/models/general_models/widgets_models.dart';
+import 'package:mc_common_app/theme/colors.dart';
 import 'package:mc_common_app/utils/enums.dart';
 import 'package:mc_common_app/utils/navigator.dart';
 import 'package:mc_common_app/view_models/ad_view_model.dart';
@@ -15,11 +18,111 @@ import 'package:mc_common_app/views/appointments/widgets/common_appointment_slid
 import 'package:mc_common_app/widgets/common_widgets/app_bar.dart';
 import 'package:mc_common_app/widgets/common_widgets/view_all_widget.dart';
 import 'package:mc_common_app/widgets/extensions/extensions_widget.dart';
+import 'package:mc_common_app/widgets/shimmer/home_shimmer_widgets.dart';
 import 'package:provider/provider.dart';
 
-class HomeFragment extends StatelessWidget {
+class HomeFragment extends StatefulWidget {
   const HomeFragment({Key? key}) : super(key: key);
 
+  @override
+  State<HomeFragment> createState() => _HomeFragmentState();
+}
+
+class _HomeFragmentState extends State<HomeFragment> {
+  bool _isSearchingServices = false;
+  final TextEditingController _searchController = TextEditingController();
+  String _searchQuery = '';
+
+  @override
+  void dispose() {
+    _searchController.dispose();
+    super.dispose();
+  }
+
+  void _toggleSearch() {
+    setState(() {
+      _isSearchingServices = !_isSearchingServices;
+      if (!_isSearchingServices) {
+        _searchController.clear();
+        _searchQuery = '';
+      }
+    });
+  }
+
+  List<FilterListModel> _filterServices(List<FilterListModel> services) {
+    if (_searchQuery.isEmpty) {
+      return services;
+    }
+    return services.where((service) {
+      return service.title.toLowerCase().contains(_searchQuery.toLowerCase());
+    }).toList();
+  }
+
+  Widget _buildServicesHeader() {
+    if (_isSearchingServices) {
+      return Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 21),
+        child: Row(
+          children: [
+            Expanded(
+              child: Container(
+                height: 55,
+                decoration: BoxDecoration(
+                  color: Colors.grey[200],
+                  borderRadius: BorderRadius.circular(12),
+                  border: Border.all(color: Colors.grey[300]!, width: 1),
+                ),
+                child: TextField(
+                  controller: _searchController,
+                  autofocus: true,
+                  style: const TextStyle(fontSize: 16),
+                  onChanged: (value) {
+                    setState(() {
+                      _searchQuery = value;
+                    });
+                  },
+                  decoration: InputDecoration(
+                    hintText: LocaleKeys.searchService.tr(),
+                    hintStyle: TextStyle(fontSize: 16, color: Colors.grey[600]),
+                    prefixIcon: Icon(Icons.search, size: 26, color: Colors.grey[700]),
+                    border: InputBorder.none,
+                    contentPadding: const EdgeInsets.symmetric(horizontal: 18, vertical: 16),
+                  ),
+                ),
+              ),
+            ),
+            14.width,
+            InkWell(
+              onTap: _toggleSearch,
+              child: Container(
+                height: 55,
+                width: 55,
+                decoration: BoxDecoration(
+                  color: Colors.grey[200],
+                  borderRadius: BorderRadius.circular(12),
+                  border: Border.all(color: Colors.grey[300]!, width: 1),
+                ),
+                child: Icon(Icons.close, size: 26, color: Colors.grey[700]),
+              ),
+            ),
+          ],
+        ),
+      );
+    } else {
+      return Row(
+        children: [
+          Expanded(
+            child: LocaleKeys.services.tr().toUpperCase().toText(fontSize: 20, isUpperCase: true, fontWeight: FontWeight.w600),
+          ),
+          InkWell(
+            onTap: _toggleSearch,
+            child: const Icon(Icons.search, size: 28, color: MyColors.primaryColor),
+          ),
+        ],
+      ).horPaddingMain();
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
@@ -69,7 +172,14 @@ class HomeFragment extends StatelessWidget {
               ).horPaddingMain().toViewOnly(context, onTap: () {
                 navigateWithName(context, AppRoutes.loginWithPassword, arguments: false);
               }),
-              CommonAppointmentSliderWidget()
+              Consumer<AppointmentsVM>(
+                builder: (BuildContext context, AppointmentsVM appointmentVM, Widget? child) {
+                  // Show shimmer when loading
+                  if (appointmentVM.state == ViewState.busy) {
+                    return const AppointmentSliderShimmer();
+                  }
+                  // Show actual data when idle
+                  return CommonAppointmentSliderWidget()
                       .toWhiteContainer(
                         width: double.infinity,
                         backgroundColor: Colors.transparent,
@@ -77,30 +187,49 @@ class HomeFragment extends StatelessWidget {
                       .margin(left: 21, right: 21)
                       .toViewOnly(context, onTap: () {
                     navigateWithName(context, AppRoutes.loginWithPassword, arguments: false);
-              }),
+                  });
+                },
+              ),
 
               // SERVICES SECTION
               14.height,
               Consumer(
                 builder: (BuildContext context, AppointmentsVM appointmentVM, Widget? child) {
+                  // Show shimmer when loading
                   if (appointmentVM.state == ViewState.busy) {
-                    return Center(child: CircularProgressIndicator());
+                    return Column(
+                      children: [
+                        _buildServicesHeader(),
+                        14.height,
+                        const ServicesGridShimmer(),
+                      ],
+                    );
                   }
+                  // Show actual data when idle
                   if (appointmentVM.branchesCategoriesFilterOptions.isNotEmpty) {
+                    // Filter services based on search query
+                    final filteredServices = _filterServices(appointmentVM.branchesCategoriesFilterOptions);
+                    
                     return Column(
                       children: [
-                        ViewAllWidget(
+                        _buildServicesHeader().toViewOnly(context, onTap: () {
-                          title: LocaleKeys.services.tr().toUpperCase(),
-                          subTitle: '',
-                          onSubtitleTapped: () {},
-                        ).horPaddingMain().toViewOnly(context, onTap: () {
                           navigateWithName(context, AppRoutes.loginWithPassword, arguments: false);
                         }),
-                        MyServicesCategoriesWidget(homeCategories: appointmentVM.branchesCategoriesFilterOptions).horPaddingMain()
+                        14.height,
+                        filteredServices.isEmpty
+                            ? Padding(
+                                padding: const EdgeInsets.all(40),
+                                child: LocaleKeys.noServiceFound.tr().toText(
+                                  fontSize: 16,
+                                  color: Colors.grey,
+                                  textAlign: TextAlign.center,
+                                ),
+                              )
+                            : MyServicesCategoriesWidget(homeCategories: filteredServices).horPaddingMain(),
                       ],
                     );
                   }
-                  return SizedBox();
+                  return const SizedBox();
                 },
               ),
 
@@ -150,9 +279,22 @@ class HomeFragment extends StatelessWidget {
               // ADS SECTION
               Consumer(
                 builder: (BuildContext context, AdVM adVM, Widget? child) {
+                  // Show shimmer when loading
                   if (adVM.state == ViewState.busy) {
-                    return Center(child: CircularProgressIndicator());
+                    return Column(
+                      children: [
+                        15.height,
+                        ViewAllWidget(
+                          title: LocaleKeys.my_active_Ads.tr().toUpperCase(),
+                          subTitle: LocaleKeys.view_all.tr(),
+                          onSubtitleTapped: () {},
+                        ).horPaddingMain(),
+                        14.height,
+                        const AdsListShimmer(itemCount: 2),
+                      ],
+                    );
                   }
+                  // Show actual data when idle
                   return Column(
                     children: [
                       if (adVM.myActiveAdsForHome.isNotEmpty) ...[
@@ -173,7 +315,7 @@ class HomeFragment extends StatelessWidget {
                               shouldShowAdStatus: true,
                               isAdsFragment: false,
                               adsList: adVM.myActiveAdsForHome,
-                              scrollPhysics: NeverScrollableScrollPhysics(),
+                              scrollPhysics: const NeverScrollableScrollPhysics(),
                               hasMoreData: adVM.isExploreAdsTapped ? adVM.hasMoreDataForExploreAds : adVM.hasMoreDataForMyAds,
                             ).toViewOnly(context, onTap: () {
                               navigateWithName(context, AppRoutes.loginWithPassword, arguments: false);
@@ -181,30 +323,31 @@ class HomeFragment extends StatelessWidget {
                           ],
                         )
                       ],
-                      if (adVM.exploreAds.isNotEmpty) ...[
+                      // RECOMMENDED ADS SECTION - COMMENTED OUT
-                        Column(
+                      // if (adVM.exploreAds.isNotEmpty) ...[
-                          children: [
+                      //   Column(
-                            15.height,
+                      //     children: [
-                            ViewAllWidget(
+                      //       15.height,
-                              title: LocaleKeys.myRecommendedAds.tr().toUpperCase(),
+                      //       ViewAllWidget(
-                              subTitle: LocaleKeys.view_all.tr(),
+                      //         title: LocaleKeys.myRecommendedAds.tr().toUpperCase(),
-                              onSubtitleTapped: () {
+                      //         subTitle: LocaleKeys.view_all.tr(),
-                                context.read<DashboardVmCustomer>().onNavbarTapped(3);
+                      //         onSubtitleTapped: () {
-                                context.read<AdVM>().updateIsExploreAds(true);
+                      //           context.read<DashboardVmCustomer>().onNavbarTapped(3);
-                                context.read<AdVM>().applyFilterOnExploreAds(vehicleBrandId: 0);
+                      //           context.read<AdVM>().updateIsExploreAds(true);
-                              },
+                      //           context.read<AdVM>().applyFilterOnExploreAds(vehicleBrandId: 0);
-                            ).horPaddingMain(),
+                      //         },
-                            AdsListWidget(
+                      //       ).horPaddingMain(),
-                              isDraftAds: false,
+                      //       AdsListWidget(
-                              shouldShowAdStatus: false,
+                      //         isDraftAds: false,
-                              adsList: adVM.exploreAds.length >= 3 ? adVM.exploreAds.take(3).toList() : adVM.exploreAds,
+                      //         shouldShowAdStatus: false,
-                              isAdsFragment: false,
+                      //         adsList: adVM.exploreAds.length >= 3 ? adVM.exploreAds.take(3).toList() : adVM.exploreAds,
-                              scrollPhysics: NeverScrollableScrollPhysics(),
+                      //         isAdsFragment: false,
-                              hasMoreData: adVM.isExploreAdsTapped ? adVM.hasMoreDataForExploreAds : adVM.hasMoreDataForMyAds,
+                      //         scrollPhysics: NeverScrollableScrollPhysics(),
-                            ),
+                      //         hasMoreData: adVM.isExploreAdsTapped ? adVM.hasMoreDataForExploreAds : adVM.hasMoreDataForMyAds,
-                          ],
+                      //       ),
-                        )
+                      //     ],
-                      ]
+                      //   )
+                      // ]
                     ],
                   );
                 },

lib/views/dashboard/widgets/my_services_categories_widget.dart

@@ -1,7 +1,10 @@
 import 'package:flutter/material.dart';
+import 'package:mc_common_app/classes/app_state.dart';
+import 'package:mc_common_app/classes/consts.dart';
 import 'package:mc_common_app/extensions/int_extensions.dart';
 import 'package:mc_common_app/extensions/string_extensions.dart';
 import 'package:mc_common_app/models/general_models/widgets_models.dart';
+import 'package:mc_common_app/theme/colors.dart';
 import 'package:mc_common_app/view_models/appointments_view_model.dart';
 import 'package:mc_common_app/view_models/dashboard_view_model_customer.dart';
 import 'package:mc_common_app/widgets/extensions/extensions_widget.dart';
@@ -14,45 +17,89 @@ class MyServicesCategoriesWidget extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return SizedBox(
+    final isArabic = AppState().isArabic(context);
-      width: double.infinity,
+    // Filter out categories with id == 0
-      height: 140,
+    final filteredCategories = homeCategories.where((category) => category.id != 0).toList();
-      child: ListView.builder(
+
-        itemCount: homeCategories.length,
+    // Define background colors to cycle through
-        scrollDirection: Axis.horizontal,
+    final List<Color> bgColors = [
+      const Color(0xFFF3F4F6), // Light gray
+      const Color(0xFFFEF4E9), // Light cream/orange
+      const Color(0xFFE5EEE5), // Light green
+      const Color(0xFFF0EFF5), // Light purple
+    ];
+
+    return GridView.builder(
       shrinkWrap: true,
+      physics: const NeverScrollableScrollPhysics(),
+      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+        crossAxisCount: 3,
+        mainAxisSpacing: 12,
+        crossAxisSpacing: 12,
+        childAspectRatio: 0.9,
+      ),
+      itemCount: filteredCategories.length,
       itemBuilder: (BuildContext context, int index) {
-          FilterListModel category = homeCategories[index];
+        FilterListModel category = filteredCategories[index];
-          if (category.id == 0) {
+        // Cycle through colors based on index
-            return SizedBox();
+        Color bgColor = bgColors[index % bgColors.length];
-          }
+
-          return SizedBox(
+        return Container(
-            width: 90,
+          padding: const EdgeInsets.all(10),
+          decoration: BoxDecoration(
+            color: bgColor,
+            boxShadow: [
+              BoxShadow(
+                color: Colors.black.withOpacity(0.04),
+                blurRadius: 4,
+                offset: const Offset(0, 2),
+              ),
+            ],
+          ),
           child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            crossAxisAlignment: CrossAxisAlignment.start,
             children: [
-                category.iconUrl.buildNetworkImage(height: 73, width: 73, fit: BoxFit.cover).toCircle(borderRadius: 100),
+              category.isCustom ? category.iconUrl.buildNetworkImage(height: 32, width: 32, fit: BoxFit.fill) : category.iconUrl.buildNetworkImage(height: 32, width: 32, fit: BoxFit.fill),
-                9.height,
+              10.height,
               Flexible(
-                  child: category.title.toText(
+                child: (isArabic ? category.titleN : category.title).toText(
-                    fontSize: 14,
+                  fontSize: 16,
-                    textAlign: TextAlign.center,
+                  fontWeight: FontWeight.w600,
-                    maxLines: 2,
+                  maxLines: 3,
                   overflow: TextOverflow.ellipsis,
-                    letterSpacing: -0.84,
+                  height: 1.2,
-                    height: 18 / 14,
+                ),
+              ),
+              if (category.description.isNotEmpty || category.descriptionN.isNotEmpty) ...[
+                6.height,
+                Flexible(
+                  child: (category.description).toText(
+                    fontSize: 10,
+                    fontWeight: FontWeight.w600,
+                    maxLines: 3,
+                    overflow: TextOverflow.ellipsis,
+                    height: 1.2,
                   ),
                 ),
               ],
+              10.height,
+              Row(
+                mainAxisAlignment: MainAxisAlignment.end,
+                children: [MyAssets.arrowRight.buildSvg()],
+              ),
+            ],
           ),
         ).onPress(() {
           final appointmentVM = context.read<AppointmentsVM>();
           final dashboardCustomerVM = context.read<DashboardVmCustomer>();
           context.read<DashboardVmCustomer>().onNavbarTapped(0);
           dashboardCustomerVM.onNavbarTapped(0);
-            appointmentVM.applyFilterOnBranches(index: index);
+          // Use the original index from homeCategories for filtering
+          int originalIndex = homeCategories.indexOf(category);
+          appointmentVM.applyFilterOnBranches(index: originalIndex);
         });
       },
-      ),
     );
   }
 }

pubspec.yaml

@@ -36,10 +36,10 @@ dependencies:
   cupertino_icons: ^1.0.2
 
   mc_common_app:
-#    path: /Volumes/Data/Projects/Flutter_Projects/car_common_app
+    path: /Volumes/Data/Projects/Flutter_Projects/mowater_apps/car_common_app
 #    path: /Users/faizhashmi/Development/Projects/MyProjects/CloudSolutions/car_common_app
 #    path: /Users/aamir/StudioProjects/car_common_app
-      path: C:/dev/Mawater/car_common_app
+#      path: C:/dev/Mawater/car_common_app
 
 
 dev_dependencies: