Added customer composite key

app/javascript/controllers/customer_search_controller.js

@@ -0,0 +1,122 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["select", "phoneField", "birthYearField", "firstNameField", "surnameField", "newCustomerFields"]
+
+  connect() {
+    this.selectInstance = new TomSelect(this.selectTarget, {
+      valueField: 'id',
+      labelField: 'label',
+      searchField: ['label'],
+      maxItems: 1,
+      create: true,
+      createOnBlur: true,
+      placeholder: 'Type to search customers...',
+      
+      create: function(input) {
+        return {
+          id: `${input}__new`,
+          label: `${input} (New Customer)`
+        };
+      },
+      
+      options: [],
+      
+      load: async (query, callback) => {
+        if (!query.length) return callback();
+        
+        try {
+          const response = await fetch(`/customers/search?q=${encodeURIComponent(query)}`, {
+            headers: {
+              'Accept': 'application/json',
+              'X-Requested-With': 'XMLHttpRequest'
+            }
+          });
+          const data = await response.json();
+          callback(data);
+        } catch (error) {
+          console.error('Error loading customers:', error);
+          callback();
+        }
+      },
+
+      shouldLoad: function(query) {
+        return query.length >= 2;
+      },
+      
+      render: {
+        no_results: (data, escape) => {
+          return '<div class="no-results">No customers found. Fill in the details below.</div>';
+        },
+        option: function(item) {
+          return `<div>${item.label}</div>`;
+        }
+      },
+
+      // Events
+      onLoad: (data) => {
+        if (!data || data.length === 0) {
+          this.showNewCustomerFields();
+        }
+      },
+      
+      onChange: (value) => {
+        if (value === null) {
+          this.showNewCustomerFields();
+        }
+      },
+
+      onItemAdd: (value) => {
+        this.customerSelected(value);
+      },
+
+      onDropdownClose: (dropdown) => {
+        if (!this.selectInstance.getValue()) {
+          this.showNewCustomerFields();
+        }
+      }
+    });
+  }
+
+  customerSelected(value) {
+    if (value.endsWith('__new')) {
+      const firstName = value.replace('__new', '');
+      this.firstNameFieldTarget.value = firstName;
+      this.showNewCustomerFields();
+      return;
+    }
+
+    const [firstName, surname, phone] = value.split('_');
+    
+    if (firstName && surname && phone) {
+      const customerData = this.selectInstance.options[value];
+      
+      this.phoneFieldTarget.value = phone;
+      this.firstNameFieldTarget.value = firstName;
+      this.surnameFieldTarget.value = surname;
+      
+      if (customerData && customerData.birthyear) {
+        this.birthYearFieldTarget.value = customerData.birthyear;
+      }
+      
+      this.newCustomerFieldsTarget.classList.add('hidden');
+    }
+  }
+
+  showNewCustomerFields() {
+    this.newCustomerFieldsTarget.classList.remove('hidden');
+  }
+
+  clearFields() {
+    this.phoneFieldTarget.value = '';
+    this.firstNameFieldTarget.value = '';
+    this.surnameFieldTarget.value = '';
+    this.birthYearFieldTarget.value = '';
+  }
+
+  disconnect() {
+    if (this.selectInstance) {
+      this.selectInstance.destroy();
+    }
+  }
+}