assets/langs/ar-SA.json

@@ -873,5 +873,6 @@
   "historyFlowchart": "مخطط تدفق التاريخ",
   "to": "إلى",
   "startDate": "تاريخ البدء",
-  "endDate": "تاريخ الانتهاء"
+  "endDate": "تاريخ الانتهاء",
+  "walkin": "زيارة بدون موعد"
 }

assets/langs/en-US.json

@@ -869,5 +869,7 @@
   "regionAndLocation": "Region And Locations",
   "clearAllFilters": "Clear all filters",
   "filters": "Filters",
-  "searchClinic": "Search Clinic"
+  "searchClinic": "Search Clinic",
+  "walkin": "Walk In"
+
 }

lib/features/my_appointments/models/appointemnet_filters.dart

@@ -0,0 +1,17 @@
+import 'package:hmg_patient_app_new/core/app_assets.dart';
+
+enum  AppointmentListingFilters{
+  WALKIN("walkin", AppAssets.walkin_appointment_icon),
+  BOOKED("booked", AppAssets.calendar),
+  CONFIRMED("confirmed", AppAssets.calendar),
+  ARRIVED("arrived", AppAssets.calendar),
+  LIVECARE("livecare", AppAssets.small_livecare_icon),
+  DATESELECTION("",AppAssets.calendar, trailingIcon: AppAssets.arrow_down);
+
+  final String labelText;
+  final String leadingIcon;
+  final String trailingIcon;
+
+  const AppointmentListingFilters(this.labelText, this.leadingIcon,
+      {this.trailingIcon = ""});
+}

lib/features/my_appointments/my_appointments_view_model.dart

@@ -1,14 +1,18 @@
 import 'package:flutter/material.dart';
 import 'package:hmg_patient_app_new/core/app_state.dart';
+import 'package:hmg_patient_app_new/core/utils/date_util.dart';
+import 'package:hmg_patient_app_new/features/my_appointments/models/appointemnet_filters.dart';
 import 'package:hmg_patient_app_new/features/my_appointments/models/resp_models/patient_appointment_history_response_model.dart';
 import 'package:hmg_patient_app_new/features/my_appointments/models/resp_models/patient_appointment_share_response_model.dart';
 import 'package:hmg_patient_app_new/features/my_appointments/my_appointments_repo.dart';
+import 'package:hmg_patient_app_new/features/my_appointments/utils/appointment_type.dart';
 import 'package:hmg_patient_app_new/services/error_handler_service.dart';
 
 import '../../core/utils/doctor_response_mapper.dart' show DoctorMapper;
 
 class MyAppointmentsViewModel extends ChangeNotifier {
   int selectedTabIndex = 0;
+  int previouslySelectedTab = -1;
 
   MyAppointmentsRepo myAppointmentsRepo;
   ErrorHandlerService errorHandlerService;
@@ -21,7 +25,14 @@ class MyAppointmentsViewModel extends ChangeNotifier {
 
   bool isAppointmentDataToBeLoaded = true;
 
+  List<AppointmentListingFilters> availableFilters = [];
+  List<AppointmentListingFilters>? selectedFilter = [];
+  bool isDateFilterSelected = false;
+  DateTime? start =null;
+  DateTime? end =null;
+
   List<PatientAppointmentHistoryResponseModel> patientAppointmentsHistoryList = [];
+  List<PatientAppointmentHistoryResponseModel> filteredAppointmentList = [];
 
   List<PatientAppointmentHistoryResponseModel> patientUpcomingAppointmentsHistoryList = [];
   List<PatientAppointmentHistoryResponseModel> patientArrivedAppointmentsHistoryList = [];
@@ -35,6 +46,7 @@ class MyAppointmentsViewModel extends ChangeNotifier {
   MyAppointmentsViewModel({required this.myAppointmentsRepo, required this.errorHandlerService, required this.appState});
 
   void onTabChange(int index) {
+    previouslySelectedTab = selectedTabIndex;
     selectedTabIndex = index;
     notifyListeners();
   }
@@ -132,10 +144,43 @@ class MyAppointmentsViewModel extends ChangeNotifier {
 
     patientAppointmentsHistoryList.addAll(patientUpcomingAppointmentsHistoryList);
     patientAppointmentsHistoryList.addAll(patientArrivedAppointmentsHistoryList);
-
+    filteredAppointmentList.addAll(patientAppointmentsHistoryList);
     print('Upcoming Appointments: ${patientUpcomingAppointmentsHistoryList.length}');
     print('Arrived Appointments: ${patientArrivedAppointmentsHistoryList.length}');
     print('All Appointments: ${patientAppointmentsHistoryList.length}');
+    getFiltersForSelectedAppointmentList(filteredAppointmentList);
+  }
+
+  void getFiltersForSelectedAppointmentList(
+      List<PatientAppointmentHistoryResponseModel> filteredAppointmentList) {
+    availableFilters.clear();
+    if (filteredAppointmentList.isEmpty == true) return;
+    availableFilters.add(AppointmentListingFilters.DATESELECTION);
+    if (filteredAppointmentList
+        .any((element) => element.isLiveCareAppointment == true)) {
+      availableFilters.add(AppointmentListingFilters.LIVECARE);
+    }
+
+    if (filteredAppointmentList
+        .any((element) => element.isLiveCareAppointment == false)) {
+      availableFilters.add(AppointmentListingFilters.WALKIN);
+    }
+
+    if (filteredAppointmentList
+        .any((element) => AppointmentType.isArrived(element) == true)) {
+      availableFilters.add(AppointmentListingFilters.ARRIVED);
+    }
+
+    if (filteredAppointmentList
+        .any((element) => AppointmentType.isBooked(element) == true)) {
+      availableFilters.add(AppointmentListingFilters.BOOKED);
+    }
+
+    if (filteredAppointmentList
+        .any((element) => AppointmentType.isConfirmed(element) == true)) {
+      availableFilters.add(AppointmentListingFilters.CONFIRMED);
+    }
+    notifyListeners();
   }
 
   Future<void> getPatientShareAppointment(int projectID, int clinicID, String appointmentNo, bool isLiveCareAppointment, {Function(dynamic)? onSuccess, Function(String)? onError}) async {
@@ -337,4 +382,114 @@ class MyAppointmentsViewModel extends ChangeNotifier {
       },
     );
   }
+
+  void updateListWRTTab(int index) {
+    isDateFilterSelected = false;
+    selectedFilter = [];
+    // if(previouslySelectedTab == selectedTabIndex ) return;
+    switch (index) {
+      case 0:
+        filteredAppointmentList.clear();
+        filteredAppointmentList.addAll(patientAppointmentsHistoryList);
+        break;
+      case 1:
+        filteredAppointmentList.clear();
+        filteredAppointmentList.addAll(patientUpcomingAppointmentsHistoryList);
+        break;
+      case 2:
+        filteredAppointmentList.clear();
+        filteredAppointmentList.addAll(patientArrivedAppointmentsHistoryList);
+        break;
+    }
+    getFiltersForSelectedAppointmentList(filteredAppointmentList);
+    notifyListeners();
+  }
+
+  void setSelectedFilter(AppointmentListingFilters availableFilter) {
+    if (selectedFilter?.contains(availableFilter) == true) {
+      selectedFilter?.remove(availableFilter);
+      notifyListeners();
+
+      return;
+    }
+    selectedFilter?.add(availableFilter) ;
+    notifyListeners();
+  }
+
+  void getSelectedDateRange(DateTime? start, DateTime? end) {
+    this.start = start;
+    this.end = end;
+    isDateFilterSelected = true;
+    List<PatientAppointmentHistoryResponseModel> sourceList = [];
+    if (selectedTabIndex == 0) {
+      sourceList = patientAppointmentsHistoryList;
+    } else if (selectedTabIndex == 1) {
+      sourceList = patientUpcomingAppointmentsHistoryList;
+    } else if (selectedTabIndex == 2) {
+      sourceList = patientArrivedAppointmentsHistoryList;
+    }
+    // if (isDateFilterSelected) sourceList = filteredAppointmentList;
+    if (start == null && end == null) {
+      isDateFilterSelected = false;
+      filteredAppointmentList.clear();
+      sourceList.forEach((element) {
+        if (isUnderFilter(element)) {
+          filteredAppointmentList.add(element);
+        }
+      });
+      filteredAppointmentList.addAll(sourceList);
+    } else {
+      filteredAppointmentList.clear();
+      sourceList.forEach((element) {
+        try {
+          var dateTime = DateUtil.convertStringToDate(element.appointmentDate);
+          if (start != null && end == null) {
+            if (dateTime.isAtSameMomentAs(start)) {
+              if (isUnderFilter(element)) {
+                filteredAppointmentList.add(element);
+              }
+            }
+          } else if (start != null && end != null) {
+            if ((dateTime.isAfter(start)) && (dateTime.isBefore(end))) {
+              if (isUnderFilter(element)) {
+                filteredAppointmentList.add(element);
+              }
+            }
+          }
+        } catch (e) {}
+      });
+    }
+    notifyListeners();
+  }
+
+  void filterTheListAsPerSelection() {
+    getSelectedDateRange(start, end);
+  }
+
+  bool isUnderFilter(PatientAppointmentHistoryResponseModel element) {
+    bool isUnderTheFilter = false;
+    if (selectedFilter == null || selectedFilter!.isEmpty) return true;
+    int count = 0;
+    for (var filter in selectedFilter ?? []) {
+      switch (filter) {
+        case AppointmentListingFilters.WALKIN:
+          if (element.isLiveCareAppointment == false) return true;
+        case AppointmentListingFilters.BOOKED:
+          if (AppointmentType.isBooked(element))return true;
+
+        case AppointmentListingFilters.CONFIRMED:
+          if (AppointmentType.isConfirmed(element))return true;
+
+        case AppointmentListingFilters.ARRIVED:
+          if (AppointmentType.isArrived(element))return true;
+
+        case AppointmentListingFilters.LIVECARE:
+          if (element.isLiveCareAppointment == true) return true;
+
+        case AppointmentListingFilters.DATESELECTION:
+
+      }
+    }
+    return false;
+  }
 }

lib/generated/locale_keys.g.dart

@@ -863,6 +863,7 @@ abstract class  LocaleKeys {
   static const clearAllFilters = 'clearAllFilters';
   static const filters = 'filters';
   static const searchClinic = 'searchClinic';
+  static const walkin = 'walkin';
   static const normal = 'normal';
   static const attention = 'attention';
   static const monitor = 'monitor';

lib/main.dart

@@ -15,7 +15,6 @@ import 'package:hmg_patient_app_new/features/habib_wallet/habib_wallet_view_mode
 import 'package:hmg_patient_app_new/features/immediate_livecare/immediate_livecare_view_model.dart';
 import 'package:hmg_patient_app_new/features/insurance/insurance_view_model.dart';
 import 'package:hmg_patient_app_new/features/lab/history/lab_history_viewmodel.dart';
-import 'package:hmg_patient_app_new/features/lab/lab_range_view_model.dart';
 import 'package:hmg_patient_app_new/features/lab/lab_view_model.dart';
 import 'package:hmg_patient_app_new/features/medical_file/medical_file_view_model.dart';
 import 'package:hmg_patient_app_new/features/my_appointments/appointment_via_region_viewmodel.dart';
@@ -28,6 +27,7 @@ import 'package:hmg_patient_app_new/routes/app_routes.dart';
 import 'package:hmg_patient_app_new/services/logger_service.dart';
 import 'package:hmg_patient_app_new/services/navigation_service.dart';
 import 'package:hmg_patient_app_new/theme/app_theme.dart';
+import 'package:hmg_patient_app_new/widgets/date_range_selector/viewmodel/date_range_view_model.dart' show DateRangeSelectorRangeViewModel;
 import 'package:provider/provider.dart';
 import 'package:provider/single_child_widget.dart';
 
@@ -163,8 +163,8 @@ void main() async {
                 navigationService: getIt(), appState: getIt())),
         ChangeNotifierProvider<LabHistoryViewModel>(
             create: (_) => LabHistoryViewModel()),
-        ChangeNotifierProvider<LabRangeViewModel>(
+        ChangeNotifierProvider<DateRangeSelectorRangeViewModel>(
-            create: (_) => LabRangeViewModel()) ,
+            create: (_) => DateRangeSelectorRangeViewModel()) ,
         ChangeNotifierProvider<DoctorFilterViewModel>(
             create: (_) => DoctorFilterViewModel())
       ], child: MyApp()),

lib/presentation/appointments/my_appointments_page.dart

@@ -8,19 +8,26 @@ import 'package:hmg_patient_app_new/core/utils/size_utils.dart';
 import 'package:hmg_patient_app_new/core/utils/utils.dart';
 import 'package:hmg_patient_app_new/extensions/string_extensions.dart';
 import 'package:hmg_patient_app_new/extensions/widget_extensions.dart';
+import 'package:hmg_patient_app_new/features/my_appointments/models/appointemnet_filters.dart';
 import 'package:hmg_patient_app_new/features/my_appointments/models/resp_models/patient_appointment_history_response_model.dart';
 import 'package:hmg_patient_app_new/features/my_appointments/my_appointments_view_model.dart';
 import 'package:hmg_patient_app_new/generated/locale_keys.g.dart';
+import 'package:hmg_patient_app_new/presentation/appointments/widgets/AppointmentFilter.dart';
 import 'package:hmg_patient_app_new/presentation/appointments/widgets/appointment_card.dart';
 import 'package:hmg_patient_app_new/presentation/book_appointment/book_appointment_page.dart';
+import 'package:hmg_patient_app_new/widgets/date_range_selector/date_range_calender.dart';
 import 'package:hmg_patient_app_new/widgets/appbar/collapsing_list_view.dart';
 import 'package:hmg_patient_app_new/theme/colors.dart';
 import 'package:hmg_patient_app_new/widgets/buttons/custom_button.dart';
 import 'package:hmg_patient_app_new/widgets/custom_tab_bar.dart';
+import 'package:hmg_patient_app_new/widgets/date_range_selector/viewmodel/date_range_view_model.dart';
 import 'package:hmg_patient_app_new/widgets/routes/custom_page_route.dart';
 import 'package:hmg_patient_app_new/widgets/shimmer/movies_shimmer_widget.dart';
 import 'package:provider/provider.dart';
 
+import '../../widgets/common_bottom_sheet.dart'
+    show showCommonBottomSheetWithoutHeight;
+
 class MyAppointmentsPage extends StatefulWidget {
   const MyAppointmentsPage({super.key});
 
@@ -61,6 +68,8 @@ class _MyAppointmentsPageState extends State<MyAppointmentsPage> {
                 ],
                 onTabChange: (index) {
                   myAppointmentsViewModel.onTabChange(index);
+                  myAppointmentsViewModel.updateListWRTTab(index);
+                  context.read<DateRangeSelectorRangeViewModel>().flush();
                 },
               ).paddingSymmetrical(24.h, 0.h),
               Consumer<MyAppointmentsViewModel>(builder: (context, myAppointmentsVM, child) {
@@ -74,218 +83,147 @@ class _MyAppointmentsPageState extends State<MyAppointmentsPage> {
   }
 
   Widget getSelectedTabData(int index, MyAppointmentsViewModel myAppointmentsVM) {
-    switch (index) {
+    return getAppointList(
-      case 0:
+        myAppointmentsVM, myAppointmentsVM.filteredAppointmentList);
-        //All Appointments Tab Data
+  }
-        return Column(
+
-          crossAxisAlignment: CrossAxisAlignment.start,
+  Widget getAppointList(MyAppointmentsViewModel myAppointmentsVM,
-          children: [
+      List<PatientAppointmentHistoryResponseModel> filteredAppointmentList) {
-            // Expandable list
+    return Column(
-            ListView.separated(
+      crossAxisAlignment: CrossAxisAlignment.start,
-              padding: EdgeInsets.only(top: 24.h),
+      children: [
-              shrinkWrap: true,
+
-              physics: NeverScrollableScrollPhysics(),
+        Visibility(
-              itemCount: myAppointmentsVM.isMyAppointmentsLoading
+          visible: myAppointmentsVM.availableFilters.isNotEmpty,
-                  ? 5
+            child: getAppointmentFilters(myAppointmentsVM)),
-                  : myAppointmentsVM.patientAppointmentsHistoryList.isNotEmpty
+        ListView.separated(
-                      ? myAppointmentsVM.patientAppointmentsHistoryList.length
+          padding: EdgeInsets.only(top: 24.h),
-                      : 1,
+          shrinkWrap: true,
-              itemBuilder: (context, index) {
+          physics: NeverScrollableScrollPhysics(),
-                return myAppointmentsVM.isMyAppointmentsLoading
+          itemCount: myAppointmentsVM.isMyAppointmentsLoading
-                    ? Container(
+              ? 5
-                        decoration: RoundedRectangleBorder().toSmoothCornerDecoration(color: AppColors.whiteColor, borderRadius: 24.h, hasShadow: true),
+              : filteredAppointmentList.isNotEmpty
-                        child: AppointmentCard(
+                  ? filteredAppointmentList.length
-                          patientAppointmentHistoryResponseModel: PatientAppointmentHistoryResponseModel(),
+                  : 1,
-                          myAppointmentsViewModel: myAppointmentsViewModel,
+          itemBuilder: (context, index) {
-                          isLoading: true,
+            return myAppointmentsVM.isMyAppointmentsLoading
-                          isFromHomePage: false,
+                ? Container(
-                        ),
+                    decoration: RoundedRectangleBorder()
-                      ).paddingSymmetrical(24.h, 0.h)
+                        .toSmoothCornerDecoration(
-                    : myAppointmentsVM.patientAppointmentsHistoryList.isNotEmpty
+                            color: AppColors.whiteColor,
-                        ? AnimationConfiguration.staggeredList(
+                            borderRadius: 24.h,
-                            position: index,
+                            hasShadow: true),
-                            duration: const Duration(milliseconds: 500),
+                    child: AppointmentCard(
-                            child: SlideAnimation(
+                      patientAppointmentHistoryResponseModel:
-                              verticalOffset: 100.0,
+                          PatientAppointmentHistoryResponseModel(),
-                              child: FadeInAnimation(
+                      myAppointmentsViewModel: myAppointmentsViewModel,
-                                child: AnimatedContainer(
+                      isLoading: true,
-                                  duration: Duration(milliseconds: 300),
+                      isFromHomePage: false,
-                                  curve: Curves.easeInOut,
+                    ),
-                                  decoration: RoundedRectangleBorder().toSmoothCornerDecoration(color: AppColors.whiteColor, borderRadius: 24.h, hasShadow: true),
+                  ).paddingSymmetrical(24.h, 0.h)
-                                  child: AppointmentCard(
+                : filteredAppointmentList.isNotEmpty
-                                    patientAppointmentHistoryResponseModel: myAppointmentsVM.patientAppointmentsHistoryList[index],
+                    ? AnimationConfiguration.staggeredList(
-                                    myAppointmentsViewModel: myAppointmentsViewModel,
+                        position: index,
-                                    isLoading: false,
+                        duration: const Duration(milliseconds: 500),
-                                    isFromHomePage: false,
+                        child: SlideAnimation(
-                                  ),
+                          verticalOffset: 100.0,
-                                ).paddingSymmetrical(24.h, 0.h),
+                          child: FadeInAnimation(
+                            child: AnimatedContainer(
+                              duration: Duration(milliseconds: 300),
+                              curve: Curves.easeInOut,
+                              decoration: RoundedRectangleBorder()
+                                  .toSmoothCornerDecoration(
+                                      color: AppColors.whiteColor,
+                                      borderRadius: 24.h,
+                                      hasShadow: true),
+                              child: AppointmentCard(
+                                patientAppointmentHistoryResponseModel:
+                                    filteredAppointmentList[index],
+                                myAppointmentsViewModel:
+                                    myAppointmentsViewModel,
+                                isLoading: false,
+                                isFromHomePage: false,
                               ),
-                            ),
+                            ).paddingSymmetrical(24.h, 0.h),
-                          )
+                          ),
-                        : Utils.getNoDataWidget(
+                        ),
-                            context,
+                      )
-                            noDataText: "You don't have any appointments yet.".needTranslation,
+                    : Utils.getNoDataWidget(
-                            callToActionButton: CustomButton(
+                        context,
-                              text: LocaleKeys.bookAppo.tr(context: context),
+                        noDataText: "You don't have any appointments yet."
-                              onPressed: () {
+                            .needTranslation,
-                                Navigator.of(context).push(
+                        callToActionButton: CustomButton(
-                                  CustomPageRoute(
+                          text: LocaleKeys.bookAppo.tr(context: context),
-                                    page: BookAppointmentPage(),
+                          onPressed: () {
-                                  ),
+                            Navigator.of(context).push(
-                                );
+                              CustomPageRoute(
-                              },
+                                page: BookAppointmentPage(),
-                              backgroundColor: Color(0xffFEE9EA),
-                              borderColor: Color(0xffFEE9EA),
-                              textColor: Color(0xffED1C2B),
-                              fontSize: 14,
-                              fontWeight: FontWeight.w500,
-                              borderRadius: 12,
-                              padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
-                              height: 40,
-                              icon: AppAssets.add_icon,
-                              iconColor: AppColors.primaryRedColor,
-                            ).paddingSymmetrical(48.h, 0.h),
-                          );
-              },
-              separatorBuilder: (BuildContext cxt, int index) => SizedBox(height: 16.h),
-            ),
-          ],
-        );
-      case 1:
-        //Upcoming Appointments Tab Data
-        return Column(
-          crossAxisAlignment: CrossAxisAlignment.start,
-          children: [
-            // Expandable list
-            ListView.separated(
-              shrinkWrap: true,
-              physics: NeverScrollableScrollPhysics(),
-              itemCount: myAppointmentsVM.isMyAppointmentsLoading
-                  ? 5
-                  : myAppointmentsVM.patientUpcomingAppointmentsHistoryList.isNotEmpty
-                      ? myAppointmentsVM.patientUpcomingAppointmentsHistoryList.length
-                      : 1,
-              itemBuilder: (context, index) {
-                return myAppointmentsVM.isMyAppointmentsLoading
-                    ? const MoviesShimmerWidget().paddingSymmetrical(24.h, 0.h)
-                    : myAppointmentsVM.patientUpcomingAppointmentsHistoryList.isNotEmpty
-                        ? AnimationConfiguration.staggeredList(
-                            position: index,
-                            duration: const Duration(milliseconds: 500),
-                            child: SlideAnimation(
-                              verticalOffset: 100.0,
-                              child: FadeInAnimation(
-                                child: AnimatedContainer(
-                                  duration: Duration(milliseconds: 300),
-                                  curve: Curves.easeInOut,
-                                  margin: EdgeInsets.symmetric(vertical: 8.h),
-                                  decoration: RoundedRectangleBorder().toSmoothCornerDecoration(color: AppColors.whiteColor, borderRadius: 24.h, hasShadow: true),
-                                  child: AppointmentCard(
-                                    patientAppointmentHistoryResponseModel: myAppointmentsVM.patientUpcomingAppointmentsHistoryList[index],
-                                    myAppointmentsViewModel: myAppointmentsViewModel,
-                                  ),
-                                ).paddingSymmetrical(24.h, 0.h),
                               ),
-                            ),
+                            );
-                          )
+                          },
-                        : Utils.getNoDataWidget(
+                          backgroundColor: Color(0xffFEE9EA),
-                            context,
+                          borderColor: Color(0xffFEE9EA),
-                            noDataText: "You don't have any appointments yet.".needTranslation,
+                          textColor: Color(0xffED1C2B),
-                            callToActionButton: CustomButton(
+                          fontSize: 14,
-                              text: LocaleKeys.bookAppo.tr(context: context),
+                          fontWeight: FontWeight.w500,
-                              onPressed: () {
+                          borderRadius: 12,
-                                Navigator.of(context).push(
+                          padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
-                                  CustomPageRoute(
+                          height: 40,
-                                    page: BookAppointmentPage(),
+                          icon: AppAssets.add_icon,
-                                  ),
+                          iconColor: AppColors.primaryRedColor,
-                                );
+                        ).paddingSymmetrical(48.h, 0.h),
-                              },
+                      );
-                              backgroundColor: Color(0xffFEE9EA),
+          },
-                              borderColor: Color(0xffFEE9EA),
+          separatorBuilder: (BuildContext cxt, int index) =>
-                              textColor: Color(0xffED1C2B),
+              SizedBox(height: 16.h),
-                              fontSize: 14,
+        ),
-                              fontWeight: FontWeight.w500,
+      ],
-                              borderRadius: 12,
+    );
-                              padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
+  }
-                              height: 40,
+
-                              icon: AppAssets.add_icon,
+  Widget getAppointmentFilters(MyAppointmentsViewModel myAppointmentsVM) {
-                              iconColor: AppColors.primaryRedColor,
+    return SizedBox(
-                            ).paddingSymmetrical(48.h, 0.h),
+        height: 56.h,
-                          );
+        child: Row(
-              },
-              separatorBuilder: (BuildContext cxt, int index) => SizedBox(height: 16.h),
-            ),
-          ],
-        );
-      case 2:
-        //Completed Appointments Tab Data
-        return Column(
-          crossAxisAlignment: CrossAxisAlignment.start,
           children: [
-            // Expandable list
+            Expanded(
-            ListView.separated(
+              child: ListView.separated(
-              shrinkWrap: true,
+                  separatorBuilder: (_, index) => SizedBox(
-              physics: NeverScrollableScrollPhysics(),
+                        width: 8.h,
-              itemCount: myAppointmentsVM.isMyAppointmentsLoading
+                      ),
-                  ? 5
+                  scrollDirection: Axis.horizontal,
-                  : myAppointmentsVM.patientArrivedAppointmentsHistoryList.isNotEmpty
+                  itemCount: myAppointmentsVM.availableFilters.length,
-                      ? myAppointmentsVM.patientArrivedAppointmentsHistoryList.length
+                  itemBuilder: (_, index) => AppointmentFilters(
-                      : 1,
+                        selectedFilter: myAppointmentsVM.selectedFilter,
-              itemBuilder: (context, index) {
+                        item: myAppointmentsVM.availableFilters[index],
-                return myAppointmentsVM.isMyAppointmentsLoading
+                        onClicked: () {
-                    ? const MoviesShimmerWidget().paddingSymmetrical(24.h, 0.h)
+                          if (myAppointmentsVM.availableFilters[index] ==
-                    : myAppointmentsVM.patientArrivedAppointmentsHistoryList.isNotEmpty
+                              AppointmentListingFilters.DATESELECTION) {
-                        ? AnimationConfiguration.staggeredList(
+                            showCommonBottomSheetWithoutHeight(
-                            position: index,
+                              title: "Set The Date Range".needTranslation,
-                            duration: const Duration(milliseconds: 500),
+                              context,
-                            child: SlideAnimation(
+                              child: DateRangeSelector(
-                              verticalOffset: 100.0,
+                                onRangeSelected: (start, end) {
-                              child: FadeInAnimation(
+                                  // if (start != null) {
-                                child: AnimatedContainer(
+                                  myAppointmentsVM.getSelectedDateRange(
-                                  duration: Duration(milliseconds: 300),
+                                      start, end);
-                                  curve: Curves.easeInOut,
+                                  // }
-                                  margin: EdgeInsets.symmetric(vertical: 8.h),
+                                },
-                                  decoration: RoundedRectangleBorder().toSmoothCornerDecoration(color: AppColors.whiteColor, borderRadius: 24.h, hasShadow: true),
-                                  child: AppointmentCard(
-                                    patientAppointmentHistoryResponseModel: myAppointmentsVM.patientArrivedAppointmentsHistoryList[index],
-                                    myAppointmentsViewModel: myAppointmentsViewModel,
-                                  ),
-                                ).paddingSymmetrical(24.h, 0.h),
                               ),
-                            ),
+                              isFullScreen: false,
-                          )
+                              isCloseButtonVisible: true,
-                        : Utils.getNoDataWidget(
+                              callBackFunc: () {},
-                            context,
+                            );
-                            noDataText: "You don't have any appointments yet.".needTranslation,
+                          } else {
-                            callToActionButton: CustomButton(
+                            myAppointmentsVM.setSelectedFilter(
-                              text: LocaleKeys.bookAppo.tr(context: context),
+                                myAppointmentsVM.availableFilters[index]);
-                              onPressed: () {
+                            myAppointmentsVM.filterTheListAsPerSelection();
-                                Navigator.of(context).push(
+                          }
-                                  CustomPageRoute(
+                        },
-                                    page: BookAppointmentPage(),
+                      )),
-                                  ),
-                                );
-                              },
-                              backgroundColor: Color(0xffFEE9EA),
-                              borderColor: Color(0xffFEE9EA),
-                              textColor: Color(0xffED1C2B),
-                              fontSize: 14,
-                              fontWeight: FontWeight.w500,
-                              borderRadius: 12,
-                              padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
-                              height: 40,
-                              icon: AppAssets.add_icon,
-                              iconColor: AppColors.primaryRedColor,
-                            ).paddingSymmetrical(48.h, 0.h),
-                          );
-              },
-              separatorBuilder: (BuildContext cxt, int index) => SizedBox(height: 16.h),
             ),
           ],
-        );
+        )).paddingOnly(top: 24.h, left: 24.h, right: 24.h);
-      default:
-        return Container();
-    }
   }
 }
 

lib/presentation/appointments/widgets/AppointmentFilter.dart

@@ -0,0 +1,48 @@
+import 'package:easy_localization/easy_localization.dart' show tr, StringTranslateExtension;
+import 'package:flutter/material.dart';
+import 'package:hmg_patient_app_new/core/utils/size_utils.dart';
+import 'package:hmg_patient_app_new/extensions/widget_extensions.dart';
+import 'package:hmg_patient_app_new/features/my_appointments/models/appointemnet_filters.dart';
+import 'package:hmg_patient_app_new/features/my_appointments/my_appointments_view_model.dart';
+import 'package:hmg_patient_app_new/theme/colors.dart';
+import 'package:hmg_patient_app_new/widgets/chip/app_custom_chip_widget.dart';
+import 'package:smooth_corner/smooth_corner.dart';
+
+class AppointmentFilters extends StatelessWidget {
+  final AppointmentListingFilters item;
+  final List<AppointmentListingFilters>? selectedFilter;
+  final VoidCallback onClicked;
+
+  const AppointmentFilters(
+      {super.key,
+      required this.item,
+      required this.onClicked,
+      required this.selectedFilter});
+
+  @override
+  Widget build(BuildContext context) {
+    return AppCustomChipWidget(
+        backgroundColor:  selectedFilter?.contains(item) == true?AppColors.chipSecondaryLightRedColor:AppColors.whiteColor,
+        icon: item.leadingIcon,
+        textColor: selectedFilter?.contains(item) == true
+            ? AppColors.chipPrimaryRedBorderColor: AppColors.blackColor,
+        labelText: item.labelText.isNotEmpty?item.labelText.tr():"",
+        iconHasColor: true,
+        iconColor: selectedFilter?.contains(item) == true
+            ? AppColors.chipPrimaryRedBorderColor:AppColors.blackColor,
+        iconSize: 16,
+        deleteIcon: item.trailingIcon,
+        labelPadding: EdgeInsetsDirectional.only(start: 8.h, end: 0.h),
+        padding: EdgeInsets.symmetric(vertical: 12.h, horizontal: 8.h),
+        deleteIconSize: Size(18.h, 18.h),
+        shape: SmoothRectangleBorder(
+          borderRadius: BorderRadius.circular(10 ),
+          smoothness: 10,
+          side: BorderSide(
+              color: selectedFilter?.contains(item) == true
+                  ? AppColors.chipPrimaryRedBorderColor
+                  : AppColors.borderGrayColor,
+              width: 1),
+        )).onPress(onClicked);
+  }
+}

lib/presentation/home/landing_page.dart

@@ -32,7 +32,6 @@ import 'package:hmg_patient_app_new/presentation/home/widgets/habib_wallet_card.
 import 'package:hmg_patient_app_new/presentation/home/widgets/large_service_card.dart';
 import 'package:hmg_patient_app_new/presentation/home/widgets/small_service_card.dart';
 import 'package:hmg_patient_app_new/presentation/home/widgets/welcome_widget.dart';
-import 'package:hmg_patient_app_new/presentation/lab/lab_results/lab_result_calender.dart';
 import 'package:hmg_patient_app_new/presentation/medical_file/medical_file_page.dart';
 import 'package:hmg_patient_app_new/presentation/profile_settings/profile_settings.dart';
 import 'package:hmg_patient_app_new/services/cache_service.dart';

lib/presentation/lab/lab_results/lab_result_details.dart

@@ -6,11 +6,11 @@ import 'package:hmg_patient_app_new/core/utils/size_utils.dart';
 import 'package:hmg_patient_app_new/core/utils/utils.dart';
 import 'package:hmg_patient_app_new/extensions/string_extensions.dart';
 import 'package:hmg_patient_app_new/extensions/widget_extensions.dart';
-import 'package:hmg_patient_app_new/features/lab/lab_range_view_model.dart' show LabRangeViewModel;
+import 'package:hmg_patient_app_new/widgets/date_range_selector/viewmodel/date_range_view_model.dart';
 import 'package:hmg_patient_app_new/features/lab/lab_view_model.dart';
 import 'package:hmg_patient_app_new/features/lab/models/resp_models/lab_result.dart';
 import 'package:hmg_patient_app_new/generated/locale_keys.g.dart';
-import 'package:hmg_patient_app_new/presentation/lab/lab_results/lab_result_calender.dart';
+import 'package:hmg_patient_app_new/widgets/date_range_selector/date_range_calender.dart';
 import 'package:hmg_patient_app_new/presentation/lab/lab_results/lab_result_list_item.dart';
 import 'package:hmg_patient_app_new/theme/colors.dart' show AppColors;
 import 'package:hmg_patient_app_new/widgets/appbar/collapsing_list_view.dart';
@@ -134,7 +134,7 @@ class LabResultDetails extends StatelessWidget {
         ],
       ));
 
-  Widget LabGraph(BuildContext context) => Consumer<LabRangeViewModel>(
+  Widget LabGraph(BuildContext context) => Consumer<DateRangeSelectorRangeViewModel>(
       builder: (_, model, ___) => Consumer<LabViewModel>(
             builder: (_, labmodel, ___) => Container(
                 decoration: RoundedRectangleBorder().toSmoothCornerDecoration(
@@ -180,7 +180,7 @@ class LabResultDetails extends StatelessWidget {
                               showCommonBottomSheetWithoutHeight(
                                 title: LocaleKeys.setTheDateRange.tr(),
                                 context,
-                                child: LabResultCalender(
+                                child: DateRangeSelector(
                                   onRangeSelected: (start, end) {
 
                                     // if (start != null) {
@@ -228,7 +228,7 @@ class LabResultDetails extends StatelessWidget {
     );
   }
 
-  Widget historyBody(LabRangeViewModel model, LabViewModel labmodel) {
+  Widget historyBody(DateRangeSelectorRangeViewModel model, LabViewModel labmodel) {
     if(model.isGraphVisible){
       var graphColor = labmodel.getColor(recentLabResult.calculatedResultFlag??"N");
       return CustomGraph(
@@ -282,7 +282,7 @@ class LabResultDetails extends StatelessWidget {
     }
   }
 
-  Widget labHistoryList(LabRangeViewModel model, LabViewModel labmodel) {
+  Widget labHistoryList(DateRangeSelectorRangeViewModel model, LabViewModel labmodel) {
     return SizedBox(
       height: labmodel.filteredGraphValues.length<3?labmodel.filteredGraphValues.length*64:180.h,
       child: ListView.separated(

lib/theme/colors.dart

@@ -29,6 +29,7 @@ class AppColors {
   static const Color bgRedLightColor = Color(0xFFFEE9EA);
   static const Color bgGreenColor = Color(0xFF18C273);
   static const Color textColor = Color(0xFF2E3039);
+  static const Color borderGrayColor = Color(0x332E3039);
   static const Color textColorLight = Color(0xFF5E5E5E);
   static const Color borderOnlyColor = Color(0xFF2E3039);
   static const Color chipBorderColorOpacity20 = Color(0x332E3039);

lib/widgets/chip/app_custom_chip_widget.dart

@@ -24,6 +24,7 @@ class AppCustomChipWidget extends StatelessWidget {
     this.deleteIconColor = AppColors.textColor,
     this.deleteIconHasColor = false,
     this.padding = EdgeInsets.zero,
+    this.labelPadding ,
   });
 
   final String? labelText;
@@ -40,6 +41,7 @@ class AppCustomChipWidget extends StatelessWidget {
   final bool deleteIconHasColor;
   final OutlinedBorder? shape;
   final EdgeInsets? padding;
+  final EdgeInsetsDirectional? labelPadding;
 
   @override
   Widget build(BuildContext context) {
@@ -62,7 +64,7 @@ class AppCustomChipWidget extends StatelessWidget {
               // padding: EdgeInsets.all(0.0),
               padding: padding,
               materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
-              labelPadding: EdgeInsetsDirectional.only(start: 0.h, end: deleteIcon?.isNotEmpty == true ? 2.h : 8.h),
+              labelPadding: labelPadding??EdgeInsetsDirectional.only(start: 0.h, end: deleteIcon?.isNotEmpty == true ? 2.h : 8.h),
               backgroundColor: backgroundColor,
               shape: shape ??
                   SmoothRectangleBorder(

lib/widgets/date_range_selector/date_range_calender.dart

@@ -7,32 +7,32 @@ import 'package:hmg_patient_app_new/core/app_export.dart';
 import 'package:hmg_patient_app_new/core/utils/utils.dart';
 import 'package:hmg_patient_app_new/extensions/string_extensions.dart';
 import 'package:hmg_patient_app_new/extensions/widget_extensions.dart';
-import 'package:hmg_patient_app_new/features/lab/lab_range_view_model.dart';
 import 'package:hmg_patient_app_new/features/lab/models/Range.dart';
 import 'package:hmg_patient_app_new/generated/locale_keys.g.dart';
 import 'package:hmg_patient_app_new/theme/colors.dart';
 import 'package:hmg_patient_app_new/widgets/buttons/custom_button.dart';
 import 'package:hmg_patient_app_new/widgets/chip/app_custom_chip_widget.dart';
+import 'package:hmg_patient_app_new/widgets/date_range_selector/viewmodel/date_range_view_model.dart' show DateRangeSelectorRangeViewModel;
 import 'package:provider/provider.dart';
 import 'package:syncfusion_flutter_calendar/calendar.dart';
 import 'package:syncfusion_flutter_datepicker/datepicker.dart';
 
 typedef OnRangeSelected = void Function(DateTime? start, DateTime? end);
 
-class LabResultCalender extends StatefulWidget {
+class DateRangeSelector extends StatefulWidget {
   final OnRangeSelected onRangeSelected;
 
-  const LabResultCalender({super.key, required this.onRangeSelected});
+  const DateRangeSelector({super.key, required this.onRangeSelected});
 
   @override
-  State<LabResultCalender> createState() => _LabResultCalenderState();
+  State<DateRangeSelector> createState() => _DateRangeSelectorState();
 }
 
-class _LabResultCalenderState extends State<LabResultCalender> {
+class _DateRangeSelectorState extends State<DateRangeSelector> {
   late DateRangePickerController _calendarController;
   DateTime? start;
   DateTime? end;
-  late LabRangeViewModel model;
+  late DateRangeSelectorRangeViewModel model;
   @override
   void initState() {
     _calendarController = DateRangePickerController();
@@ -44,13 +44,17 @@ class _LabResultCalenderState extends State<LabResultCalender> {
 
   @override
   Widget build(BuildContext context) {
-    model = Provider.of<LabRangeViewModel>(context);
+    model = Provider.of<DateRangeSelectorRangeViewModel>(context);
+
+
+    _calendarController.selectedRange = PickerDateRange(model.fromDate,model.toDate);
+
     return Padding(
       padding: EdgeInsets.symmetric(horizontal: 0.h),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
-          Consumer<LabRangeViewModel>(
+          Consumer<DateRangeSelectorRangeViewModel>(
             builder: (_, model, __) => selectionChip(model),
           ).paddingOnly(bottom: 16.h),
           Container(
@@ -135,13 +139,19 @@ class _LabResultCalenderState extends State<LabResultCalender> {
                     ),
                     onSelectionChanged:
                         (DateRangePickerSelectionChangedArgs args) {
+                      print("the value is ${args.value}");
                       if (args.value is PickerDateRange) {
                         final PickerDateRange range = args.value;
                         start = range.startDate;
                         end = range.endDate;
                         model.fromDate = start;
                         model.toDate = end;
-                        model.resetCurrentlySelectedRange();
+                        if(end == null) {
+                          scheduleMicrotask((){
+                            model.resetCurrentlySelectedRange();
+                          });
+
+                        }
                       }
                     },
                   ),
@@ -151,7 +161,7 @@ class _LabResultCalenderState extends State<LabResultCalender> {
           ),
           Row(
             children: [
-              Consumer<LabRangeViewModel>(
+              Consumer<DateRangeSelectorRangeViewModel>(
                 builder: (_, model, __) =>  Visibility(
                   visible: (model.fromDate != null || model.toDate != null),
                   child: Expanded(
@@ -164,6 +174,8 @@ class _LabResultCalenderState extends State<LabResultCalender> {
                               _calendarController.selectedRange = null;
                               _calendarController.selectedDate = null;
                               model.flush();
+                              Navigator.of(context).pop();
+                              widget.onRangeSelected(null, null);
                             },
                             backgroundColor: AppColors.secondaryLightRedColor,
                             borderColor: AppColors.secondaryLightRedColor,
@@ -203,7 +215,7 @@ class _LabResultCalenderState extends State<LabResultCalender> {
   }
 
   fromDateComponent() {
-    return Consumer<LabRangeViewModel>(
+    return Consumer<DateRangeSelectorRangeViewModel>(
       builder: (_, model, __) {
         return displayDate(LocaleKeys.startDate.tr(),
             model.getDateString(model.fromDate), model.fromDate == null);
@@ -212,7 +224,7 @@ class _LabResultCalenderState extends State<LabResultCalender> {
   }
 
   toDateComponent() {
-    return Consumer<LabRangeViewModel>(
+    return Consumer<DateRangeSelectorRangeViewModel>(
       builder: (_, model, __) {
         return displayDate(LocaleKeys.endDate.tr(),
             model.getDateString(model.toDate), model.toDate == null);
@@ -254,7 +266,7 @@ class _LabResultCalenderState extends State<LabResultCalender> {
         ),
   );
 
-  selectionChip(LabRangeViewModel model) {
+  selectionChip(DateRangeSelectorRangeViewModel model) {
     return Row(
       spacing: 8.h,
       children: [
@@ -311,6 +323,7 @@ class _LabResultCalenderState extends State<LabResultCalender> {
           _calendarController.selectedRange = null;
           model.currentlySelectedRange = Range.LAST_6MONTH;
           model.calculateDatesFromRange();
+
         }),
         AppCustomChipWidget(
           labelText: "Year ${model.getCurrentYear}",
@@ -329,6 +342,7 @@ class _LabResultCalenderState extends State<LabResultCalender> {
           _calendarController.selectedRange = null;
           model.currentlySelectedRange = Range.THIS_YEAR;
           model.calculateDatesFromRange();
+
         }),
       ],
     );

lib/widgets/date_range_selector/viewmodel/date_range_view_model.dart

@@ -2,7 +2,7 @@ import 'package:dartz/dartz.dart';
 import 'package:flutter/material.dart';
 import 'package:hmg_patient_app_new/features/lab/models/Range.dart';
 
-class LabRangeViewModel extends ChangeNotifier {
+class DateRangeSelectorRangeViewModel extends ChangeNotifier {
   List months = [
     'Jan',
     'Feb',
@@ -24,8 +24,6 @@ class LabRangeViewModel extends ChangeNotifier {
 
   set currentlySelectedRange(Range? value) {
     _currentlySelectedRange = value;
-    notifyListeners();
-
   }
 
   DateTime? _toDate;
@@ -34,7 +32,7 @@ class LabRangeViewModel extends ChangeNotifier {
 
   set toDate(DateTime? value) {
     _toDate = value;
-    notifyListeners();
+
   }
 
   DateTime? _fromDate;
@@ -43,11 +41,11 @@ class LabRangeViewModel extends ChangeNotifier {
 
   set fromDate(DateTime? value) {
     _fromDate = value;
-    notifyListeners();
+
 
   }
 
-  LabRangeViewModel();
+  DateRangeSelectorRangeViewModel();
 
   get getCurrentYear => DateTime.now().year;
 
@@ -65,6 +63,7 @@ class LabRangeViewModel extends ChangeNotifier {
         _fromDate = DateTime(_toDate!.year, DateTime.january, 01);
       default:
     }
+    notifyListeners();
   }
 
   getDateString(DateTime? date){
@@ -84,6 +83,7 @@ class LabRangeViewModel extends ChangeNotifier {
 
   resetCurrentlySelectedRange(){
     currentlySelectedRange = null;
+    notifyListeners();
   }
 
   alterGraphVisibility(){