reenhacement of employee selector

lib/model/employees/multiple_select_bottomsheet.dart

@@ -1,3 +1,4 @@
+import 'dart:async';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:on_field_work/helpers/utils/base_bottom_sheet.dart';
@@ -24,33 +25,72 @@ class EmployeeSelectionBottomSheet extends StatefulWidget {
 class _EmployeeSelectionBottomSheetState
     extends State<EmployeeSelectionBottomSheet> {
   final TextEditingController _searchController = TextEditingController();
+
   final RxBool _isSearching = false.obs;
-  final RxList<EmployeeModel> _searchResults = <EmployeeModel>[].obs;
+  final RxList<EmployeeModel> _allResults = <EmployeeModel>[].obs;
+
   late RxList<EmployeeModel> _selectedEmployees;
 
+  Timer? _debounce;
+
   @override
   void initState() {
     super.initState();
     _selectedEmployees = RxList<EmployeeModel>.from(widget.initiallySelected);
-    _searchEmployees('');
+
+    _performSearch('');
   }
 
   @override
   void dispose() {
+    _debounce?.cancel();
     _searchController.dispose();
     super.dispose();
   }
 
-  Future<void> _searchEmployees(String query) async {
+  // ------------------------------------------------------
+  // 🔥 Optimized debounce-based search
+  // ------------------------------------------------------
+  void _onSearchChanged(String query) {
+    _debounce?.cancel();
+    _debounce = Timer(const Duration(milliseconds: 300), () {
+      _performSearch(query.trim());
+    });
+  }
+
+  Future<void> _performSearch(String query) async {
     _isSearching.value = true;
+
     final data = await ApiService.searchEmployeesBasic(searchString: query);
+
     final results = (data as List)
         .map((e) => EmployeeModel.fromJson(e as Map<String, dynamic>))
         .toList();
-    _searchResults.assignAll(results);
+
+    // ------------------------------------------------------
+    // Auto-move selected employees to top
+    // ------------------------------------------------------
+    results.sort((a, b) {
+      if (widget.multipleSelection) {
+        // Only move selected employees to top in multi-select
+        final aSel = _selectedEmployees.contains(a) ? 0 : 1;
+        final bSel = _selectedEmployees.contains(b) ? 0 : 1;
+
+        if (aSel != bSel) return aSel.compareTo(bSel);
+      }
+
+      // Otherwise, keep original order (or alphabetically if needed)
+      return a.name.toLowerCase().compareTo(b.name.toLowerCase());
+    });
+
+    _allResults.assignAll(results);
+
     _isSearching.value = false;
   }
 
+  // ------------------------------------------------------
+  // Handle tap & checkbox
+  // ------------------------------------------------------
   void _toggleEmployee(EmployeeModel emp) {
     if (widget.multipleSelection) {
       if (_selectedEmployees.contains(emp)) {
@@ -61,9 +101,14 @@ class _EmployeeSelectionBottomSheetState
     } else {
       _selectedEmployees.assignAll([emp]);
     }
-    _selectedEmployees.refresh(); // important for Obx rebuild
+
+    // Re-sort list after each toggle
+    _performSearch(_searchController.text.trim());
   }
 
+  // ------------------------------------------------------
+  // Submit selection
+  // ------------------------------------------------------
   void _handleSubmit() {
     if (widget.multipleSelection) {
       Navigator.of(context).pop(_selectedEmployees.toList());
@@ -73,11 +118,14 @@ class _EmployeeSelectionBottomSheetState
     }
   }
 
+  // ------------------------------------------------------
+  // Search bar widget
+  // ------------------------------------------------------
   Widget _searchBar() => Padding(
         padding: const EdgeInsets.symmetric(vertical: 8),
         child: TextField(
           controller: _searchController,
-          onChanged: _searchEmployees,
+          onChanged: _onSearchChanged,
           decoration: InputDecoration(
             hintText: 'Search employees...',
             filled: true,
@@ -88,7 +136,7 @@ class _EmployeeSelectionBottomSheetState
                     icon: const Icon(Icons.close, color: Colors.grey),
                     onPressed: () {
                       _searchController.clear();
-                      _searchEmployees('');
+                      _performSearch('');
                     },
                   )
                 : null,
@@ -102,60 +150,64 @@ class _EmployeeSelectionBottomSheetState
         ),
       );
 
+  // ------------------------------------------------------
+  // Employee list (optimized)
+  // ------------------------------------------------------
   Widget _employeeList() => Expanded(
         child: Obx(() {
-          if (_isSearching.value) {
+          final results = _allResults;
-            return const Center(child: CircularProgressIndicator());
-          }
-
-          if (_searchResults.isEmpty) {
-            return const Center(child: Text("No employees found"));
-          }
 
           return ListView.builder(
             padding: const EdgeInsets.symmetric(vertical: 4),
-            itemCount: _searchResults.length,
+            itemCount: results.length,
             itemBuilder: (context, index) {
-              final emp = _searchResults[index];
+              final emp = results[index];
+              final isSelected = _selectedEmployees.contains(emp);
 
-              return Obx(() {
+              Widget trailingWidget;
-                final isSelected = _selectedEmployees.contains(emp);
+
-                return ListTile(
+              if (widget.multipleSelection) {
-                  leading: CircleAvatar(
+                // Multiple selection → normal checkbox
-                    backgroundColor: Colors.blueAccent,
+                trailingWidget = Checkbox(
-                    child: Text(
+                  value: isSelected,
-                      (emp.firstName.isNotEmpty ? emp.firstName[0] : 'U')
+                  onChanged: (_) => _toggleEmployee(emp),
-                          .toUpperCase(),
+                  fillColor: MaterialStateProperty.resolveWith<Color>(
-                      style: const TextStyle(color: Colors.white),
+                    (states) => states.contains(MaterialState.selected)
-                    ),
+                        ? Colors.blueAccent
+                        : Colors.white,
                   ),
-                  title: Text('${emp.firstName} ${emp.lastName}'),
-                  subtitle: Text(emp.email),
-                  trailing: Checkbox(
-                    value: isSelected,
-                    onChanged: (_) {
-                      FocusScope.of(context).unfocus(); // hide keyboard
-                      _toggleEmployee(emp);
-                    },
-                    fillColor: MaterialStateProperty.resolveWith<Color>(
-                      (states) => states.contains(MaterialState.selected)
-                          ? Colors.blueAccent
-                          : Colors.white,
-                    ),
-                  ),
-                  onTap: () {
-                    FocusScope.of(context).unfocus();
-                    _toggleEmployee(emp);
-                  },
-                  contentPadding:
-                      const EdgeInsets.symmetric(horizontal: 0, vertical: 4),
                 );
-              });
+              } else {
+                // Single selection → check circle
+                trailingWidget = isSelected
+                    ? const Icon(Icons.check_circle, color: Colors.blueAccent)
+                    : const Icon(Icons.circle_outlined, color: Colors.grey);
+              }
+
+              return ListTile(
+                leading: CircleAvatar(
+                  backgroundColor: Colors.blueAccent,
+                  child: Text(
+                    (emp.firstName.isNotEmpty ? emp.firstName[0] : 'U')
+                        .toUpperCase(),
+                    style: const TextStyle(color: Colors.white),
+                  ),
+                ),
+                title: Text('${emp.firstName} ${emp.lastName}'),
+                subtitle: Text(emp.email),
+                trailing: trailingWidget,
+                onTap: () => _toggleEmployee(emp),
+                contentPadding:
+                    const EdgeInsets.symmetric(horizontal: 0, vertical: 4),
+              );
             },
           );
         }),
       );
 
+  // ------------------------------------------------------
+  // Build bottom sheet
+  // ------------------------------------------------------
   @override
   Widget build(BuildContext context) {
     return BaseBottomSheet(
@@ -164,10 +216,12 @@ class _EmployeeSelectionBottomSheetState
       onSubmit: _handleSubmit,
       child: SizedBox(
         height: MediaQuery.of(context).size.height * 0.7,
-        child: Column(children: [
+        child: Column(
-          _searchBar(),
+          children: [
-          _employeeList(),
+            _searchBar(),
-        ]),
+            _employeeList(),
+          ],
+        ),
       ),
     );
   }

lib/model/finance/add_payment_request_bottom_sheet.dart

@@ -9,6 +9,8 @@ import 'package:on_field_work/helpers/widgets/my_spacing.dart';
 import 'package:on_field_work/helpers/widgets/my_snackbar.dart';
 import 'package:on_field_work/helpers/widgets/expense/expense_form_widgets.dart';
 import 'package:on_field_work/helpers/widgets/my_confirmation_dialog.dart';
+import 'package:on_field_work/model/employees/multiple_select_bottomsheet.dart';
+import 'package:on_field_work/model/employees/employee_model.dart';
 
 Future<T?> showPaymentRequestBottomSheet<T>({
   bool isEdit = false,
@@ -58,12 +60,10 @@ class _PaymentRequestBottomSheetState extends State<_PaymentRequestBottomSheet>
       if (widget.isEdit && widget.existingData != null) {
         final data = widget.existingData!;
 
-        // Prefill text fields
         controller.titleController.text = data["title"] ?? "";
         controller.amountController.text = data["amount"]?.toString() ?? "";
         controller.descriptionController.text = data["description"] ?? "";
 
-        // Prefill due date
         if (data["dueDate"] != null && data["dueDate"].toString().isNotEmpty) {
           DateTime? dueDate = DateTime.tryParse(data["dueDate"].toString());
           if (dueDate != null) {
@@ -73,15 +73,15 @@ class _PaymentRequestBottomSheetState extends State<_PaymentRequestBottomSheet>
           }
         }
 
-        // Prefill dropdowns & toggles
         controller.selectedProject.value = {
           'id': data["projectId"],
           'name': data["projectName"],
         };
+
         controller.selectedPayee.value = data["payee"] ?? "";
         controller.isAdvancePayment.value = data["isAdvancePayment"] ?? false;
 
-        // Categories & currencies
+        // When categories and currencies load, set selected ones
         everAll([controller.categories, controller.currencies], (_) {
           controller.selectedCategory.value = controller.categories
               .firstWhereOrNull((c) => c.id == data["expenseCategoryId"]);
@@ -89,7 +89,6 @@ class _PaymentRequestBottomSheetState extends State<_PaymentRequestBottomSheet>
               .firstWhereOrNull((c) => c.id == data["currencyId"]);
         });
 
-        // Attachments
         final attachmentsData = data["attachments"];
         if (attachmentsData != null &&
             attachmentsData is List &&
@@ -116,21 +115,21 @@ class _PaymentRequestBottomSheetState extends State<_PaymentRequestBottomSheet>
 
   @override
   Widget build(BuildContext context) {
-    return Obx(() => Form(
+    return Obx(
+      () => SafeArea(
+        child: Form(
           key: _formKey,
           child: BaseBottomSheet(
-            title: widget.isEdit
+            title: widget.isEdit ? "Edit Payment Request" : "Create Payment Request",
-                ? "Edit Payment Request"
-                : "Create Payment Request",
             isSubmitting: controller.isSubmitting.value,
             onCancel: Get.back,
             submitText: "Save as Draft",
             onSubmit: () async {
               if (_formKey.currentState!.validate() && _validateSelections()) {
                 bool success = false;
+
                 if (widget.isEdit && widget.existingData != null) {
-                  final requestId =
+                  final requestId = widget.existingData!['id']?.toString() ?? '';
-                      widget.existingData!['id']?.toString() ?? '';
                   if (requestId.isNotEmpty) {
                     success = await controller.submitEditedPaymentRequest(
                         requestId: requestId);
@@ -144,7 +143,7 @@ class _PaymentRequestBottomSheetState extends State<_PaymentRequestBottomSheet>
 
                 if (success) {
                   Get.back();
-                  if (widget.onUpdated != null) widget.onUpdated!();
+                  widget.onUpdated?.call();
 
                   showAppSnackbar(
                     title: "Success",
@@ -157,31 +156,33 @@ class _PaymentRequestBottomSheetState extends State<_PaymentRequestBottomSheet>
               }
             },
             child: SingleChildScrollView(
+              padding: const EdgeInsets.only(bottom: 20),
               child: Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
+                mainAxisSize: MainAxisSize.min,
                 children: [
                   _buildDropdown(
-                      "Select Project",
+                    "Select Project",
-                      Icons.work_outline,
+                    Icons.work_outline,
-                      controller.selectedProject.value?['name'] ??
+                    controller.selectedProject.value?['name'] ?? "Select Project",
-                          "Select Project",
+                    controller.globalProjects,
-                      controller.globalProjects,
+                    (p) => p['name'],
-                      (p) => p['name'],
+                    controller.selectProject,
-                      controller.selectProject,
+                    key: _projectDropdownKey,
-                      key: _projectDropdownKey),
+                  ),
                   _gap(),
                   _buildDropdown(
-                      "Expense Category",
+                    "Expense Category",
-                      Icons.category_outlined,
+                    Icons.category_outlined,
-                      controller.selectedCategory.value?.name ??
+                    controller.selectedCategory.value?.name ?? "Select Category",
-                          "Select Category",
+                    controller.categories,
-                      controller.categories,
+                    (c) => c.name,
-                      (c) => c.name,
+                    controller.selectCategory,
-                      controller.selectCategory,
+                    key: _categoryDropdownKey,
-                      key: _categoryDropdownKey),
+                  ),
                   _gap(),
-                  _buildTextField(
+                  _buildTextField("Title", Icons.title_outlined,
-                      "Title", Icons.title_outlined, controller.titleController,
+                      controller.titleController,
                       hint: "Enter title", validator: Validators.requiredField),
                   _gap(),
                   _buildRadio("Is Advance Payment", Icons.attach_money_outlined,
@@ -199,17 +200,17 @@ class _PaymentRequestBottomSheetState extends State<_PaymentRequestBottomSheet>
                           ? null
                           : "Enter valid amount"),
                   _gap(),
-                  _buildPayeeAutocompleteField(),
+                  _buildPayeeField(),
                   _gap(),
                   _buildDropdown(
-                      "Currency",
+                    "Currency",
-                      Icons.monetization_on_outlined,
+                    Icons.monetization_on_outlined,
-                      controller.selectedCurrency.value?.currencyName ??
+                    controller.selectedCurrency.value?.currencyName ?? "Select Currency",
-                          "Select Currency",
+                    controller.currencies,
-                      controller.currencies,
+                    (c) => c.currencyName,
-                      (c) => c.currencyName,
+                    controller.selectCurrency,
-                      controller.selectCurrency,
+                    key: _currencyDropdownKey,
-                      key: _currencyDropdownKey),
+                  ),
                   _gap(),
                   _buildTextField("Description", Icons.description_outlined,
                       controller.descriptionController,
@@ -218,11 +219,14 @@ class _PaymentRequestBottomSheetState extends State<_PaymentRequestBottomSheet>
                       validator: Validators.requiredField),
                   _gap(),
                   _buildAttachmentsSection(),
+                  MySpacing.height(30),
                 ],
               ),
             ),
           ),
-        ));
+        ),
+      ),
+    );
   }
 
   Widget _buildDropdown<T>(String title, IconData icon, String value,
@@ -234,9 +238,10 @@ class _PaymentRequestBottomSheetState extends State<_PaymentRequestBottomSheet>
         SectionTitle(icon: icon, title: title, requiredField: true),
         MySpacing.height(6),
         DropdownTile(
-            key: key,
+          key: key,
-            title: value,
+          title: value,
-            onTap: () => _showOptionList(options, getLabel, onSelected, key)),
+          onTap: () => _showOptionList(options, getLabel, onSelected, key),
+        ),
       ],
     );
   }
@@ -265,7 +270,7 @@ class _PaymentRequestBottomSheetState extends State<_PaymentRequestBottomSheet>
   }
 
   Widget _buildRadio(
-      String title, IconData icon, RxBool controller, List<String> labels) {
+      String title, IconData icon, RxBool controllerBool, List<String> labels) {
     return Column(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
@@ -284,15 +289,16 @@ class _PaymentRequestBottomSheetState extends State<_PaymentRequestBottomSheet>
                 final i = entry.key;
                 final label = entry.value;
                 final value = i == 0;
+
                 return Expanded(
                   child: RadioListTile<bool>(
                     contentPadding: EdgeInsets.zero,
                     title: Text(label),
                     value: value,
-                    groupValue: controller.value,
+                    groupValue: controllerBool.value,
                     activeColor: contentTheme.primary,
                     onChanged: (val) =>
-                        val != null ? controller.value = val : null,
+                        val != null ? controllerBool.value = val : null,
                   ),
                 );
               }).toList(),
@@ -306,9 +312,7 @@ class _PaymentRequestBottomSheetState extends State<_PaymentRequestBottomSheet>
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
         const SectionTitle(
-            icon: Icons.calendar_today,
+            icon: Icons.calendar_today, title: "Due To Date", requiredField: true),
-            title: "Due To Date",
-            requiredField: true),
         MySpacing.height(6),
         GestureDetector(
           onTap: () => controller.pickDueDate(context),
@@ -336,75 +340,35 @@ class _PaymentRequestBottomSheetState extends State<_PaymentRequestBottomSheet>
     );
   }
 
-  Widget _buildPayeeAutocompleteField() {
+  Widget _buildPayeeField() {
     return Column(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
-        SectionTitle(
+        const SectionTitle(
-            icon: Icons.person_outline, title: "Payee", requiredField: true),
+          icon: Icons.person_outline,
-        const SizedBox(height: 6),
+          title: "Payee",
-        Autocomplete<String>(
+          requiredField: true,
-          optionsBuilder: (textEditingValue) {
+        ),
-            final query = textEditingValue.text.toLowerCase();
+        MySpacing.height(6),
-            return query.isEmpty
+        GestureDetector(
-                ? const Iterable<String>.empty()
+          onTap: _showPayeeSelector,
-                : controller.payees
+          child: TileContainer(
-                    .where((p) => p.toLowerCase().contains(query));
+            child: Row(
-          },
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
-          displayStringForOption: (option) => option,
+              children: [
-          fieldViewBuilder:
+                Expanded(
-              (context, fieldController, focusNode, onFieldSubmitted) {
+                  child: Obx(() => Text(
-            // Avoid updating during build
+                        controller.selectedPayee.value?.name ?? "Select Payee",
-            WidgetsBinding.instance.addPostFrameCallback((_) {
+                        style: const TextStyle(fontSize: 15),
-              if (fieldController.text != controller.selectedPayee.value) {
+                        overflow: TextOverflow.ellipsis,
-                fieldController.text = controller.selectedPayee.value;
+                      )),
-                fieldController.selection = TextSelection.fromPosition(
-                    TextPosition(offset: fieldController.text.length));
-              }
-            });
-
-            return TextFormField(
-              controller: fieldController,
-              focusNode: focusNode,
-              decoration: InputDecoration(
-                hintText: "Type or select payee",
-                filled: true,
-                fillColor: Colors.grey.shade100,
-                contentPadding:
-                    const EdgeInsets.symmetric(horizontal: 12, vertical: 14),
-                border: OutlineInputBorder(
-                  borderRadius: BorderRadius.circular(8),
-                  borderSide: BorderSide(color: Colors.grey.shade300),
                 ),
-              ),
+                const Icon(Icons.arrow_drop_down, size: 22),
-              validator: (v) =>
+              ],
-                  v == null || v.trim().isEmpty ? "Please enter payee" : null,
-              onChanged: (val) => controller.selectedPayee.value = val,
-            );
-          },
-          onSelected: (selection) => controller.selectedPayee.value = selection,
-          optionsViewBuilder: (context, onSelected, options) => Material(
-            color: Colors.white,
-            elevation: 4,
-            borderRadius: BorderRadius.circular(8),
-            child: ConstrainedBox(
-              constraints: const BoxConstraints(maxHeight: 200, minWidth: 300),
-              child: ListView.builder(
-                padding: EdgeInsets.zero,
-                itemCount: options.length,
-                itemBuilder: (_, index) => InkWell(
-                  onTap: () => onSelected(options.elementAt(index)),
-                  child: Container(
-                    padding: const EdgeInsets.symmetric(
-                        vertical: 10, horizontal: 12),
-                    child: Text(options.elementAt(index),
-                        style: const TextStyle(fontSize: 14)),
-                  ),
-                ),
-              ),
             ),
           ),
         ),
+        const SizedBox(height: 6),
       ],
     );
   }
@@ -492,8 +456,7 @@ class _PaymentRequestBottomSheetState extends State<_PaymentRequestBottomSheet>
       return;
     }
 
-    final RenderBox button =
+    final RenderBox button = key.currentContext!.findRenderObject() as RenderBox;
-        key.currentContext!.findRenderObject() as RenderBox;
     final RenderBox overlay =
         Overlay.of(context).context.findRenderObject() as RenderBox;
     final position = button.localToGlobal(Offset.zero, ancestor: overlay);
@@ -507,8 +470,7 @@ class _PaymentRequestBottomSheetState extends State<_PaymentRequestBottomSheet>
           0),
       shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
       items: options
-          .map(
+          .map((opt) => PopupMenuItem<T>(value: opt, child: Text(getLabel(opt))))
-              (opt) => PopupMenuItem<T>(value: opt, child: Text(getLabel(opt))))
           .toList(),
     );
 
@@ -523,7 +485,7 @@ class _PaymentRequestBottomSheetState extends State<_PaymentRequestBottomSheet>
     if (controller.selectedCategory.value == null) {
       return _showError("Please select a category");
     }
-    if (controller.selectedPayee.value.isEmpty) {
+    if (controller.selectedPayee.value == null) {
       return _showError("Please select a payee");
     }
     if (controller.selectedCurrency.value == null) {
@@ -532,6 +494,25 @@ class _PaymentRequestBottomSheetState extends State<_PaymentRequestBottomSheet>
     return true;
   }
 
+  Future<void> _showPayeeSelector() async {
+    final result = await showModalBottomSheet(
+      context: context,
+      isScrollControlled: true,
+      backgroundColor: Colors.transparent,
+      builder: (_) => EmployeeSelectionBottomSheet(
+        title: "Select Payee",
+        multipleSelection: false,
+        initiallySelected: controller.selectedPayee.value != null
+            ? [controller.selectedPayee.value!]
+            : [],
+      ),
+    );
+
+    if (result is EmployeeModel) {
+      controller.selectedPayee.value = result;
+    }
+  }
+
   bool _showError(String msg) {
     showAppSnackbar(title: "Error", message: msg, type: SnackbarType.error);
     return false;

lib/model/finance/payment_request_filter_bottom_sheet.dart

@@ -8,7 +8,7 @@ import 'package:on_field_work/helpers/widgets/my_text_style.dart';
 import 'package:on_field_work/helpers/utils/mixins/ui_mixin.dart';
 import 'package:on_field_work/helpers/widgets/date_range_picker.dart';
 import 'package:on_field_work/model/employees/employee_model.dart';
-import 'package:on_field_work/model/expense/employee_selector_for_filter_bottom_sheet.dart';
+import 'package:on_field_work/model/employees/multiple_select_bottomsheet.dart';
 
 class PaymentRequestFilterBottomSheet extends StatefulWidget {
   final PaymentRequestController controller;
@@ -441,9 +441,9 @@ class _PaymentRequestFilterBottomSheetState
               shape: const RoundedRectangleBorder(
                 borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
               ),
-              builder: (context) => EmployeeSelectorBottomSheet(
+              builder: (context) => EmployeeSelectionBottomSheet(
-                selectedEmployees: selectedEmployees,
+                initiallySelected: selectedEmployees.toList(),
-                searchEmployees: (query) => searchEmployees(query, items),
+                multipleSelection: true,
                 title: title,
               ),
             );