Added customer composite key

app/javascript/controllers/calendar_controller.js

@@ -0,0 +1,18 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.initializeCalendar();
+  }
+  
+  initializeCalendar() {
+    // If using a library like FullCalendar
+    const calendar = new FullCalendar.Calendar(this.element, {
+      height: '80vh', // Full viewport height
+      width: '100%',
+      // Other calendar options...
+    });
+    
+    calendar.render();
+  }
+} 

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();
+    }
+  }
+} 

app/javascript/controllers/main_calendar_controller.js

@@ -2,7 +2,13 @@ import {Controller} from "@hotwired/stimulus"
 // Connects to data-controller="main-calendar"
 
 export default class extends Controller {
+  static targets = ["dateDisplay", "navigation"]
+
   connect() {
+    // Set height to full viewport
+    document.getElementById('main-calendar').style.height = '100vh';
+    document.getElementById('main-calendar').style.width = '100vw';
+    
     const calendar = new tui.Calendar(document.getElementById('main-calendar'), {
       defaultView: 'week',
       usageStatistics: false,
@@ -10,12 +16,29 @@ export default class extends Controller {
         taskView: false,
         scheduleView: false,
         eventView: ['time'],
+        startDayOfWeek: 1, // Start week on Monday
         hourStart: 4,
         hourEnd: 21,
       },
+      // This is important - set the height to 100%
+      height: '100%',
+      // Make sure it takes full width
+      width: '100%',
       template: {
         timegridDisplayPrimaryTime({time}) {
           return `${time.getHours()} sati`;
+        },
+        popupDetailLocation(eventObj) {
+          return ''; // Empty location as requested
+        },
+        popupDetailAttendees(eventObj) {
+          return eventObj.attendees[0]; // Show team name
+        },
+        popupDetailState(eventObj) {
+          return '';
+        },
+        popupDetailBody(eventObj) {
+          return '';
         }
       },
       calendars: [
@@ -25,11 +48,17 @@ export default class extends Controller {
           backgroundColor: '#00a9ff',
         },
       ],
+      // Enable the built-in popup
+      useDetailPopup: true,
     });
 
     window.calendar = calendar;
     this.getCalendardata();
+    
     calendar.render();
+    
+    // Update the date display after rendering
+    this.updateDateDisplay();
   }
 
   getCalendardata() {
@@ -40,14 +69,75 @@ export default class extends Controller {
         {
           id: reservation.id,
           calendarId: 'cal1',
-          title: reservation.customer.name,
+          title: reservation.customer.first_name + ' ' + reservation.customer.surname + ' (' + reservation.customer.phone + ')',
           category: 'time',
           dueDateClass: reservation.dueDateClass,
-          location: reservation.team.name,
+          location: '', // Empty location as requested
+          attendees: [reservation.team.name], // Team name as attendee
           start: reservation.start_time,
           end: reservation.end_time
         }
       ])
     });
   }
-}
+  
+  // Navigation methods - using the global window.calendar
+  prev() {
+    window.calendar.prev();
+    this.updateDateDisplay();
+  }
+  
+  next() {
+    window.calendar.next();
+    this.updateDateDisplay();
+  }
+  
+  today() {
+    window.calendar.today();
+    this.updateDateDisplay();
+  }
+  
+  // Helper for updating the date display
+  updateDateDisplay() {
+    if (this.hasDateDisplayTarget) {
+      const calendar = window.calendar;
+      const currentDate = calendar.getDate();
+      
+      // Format the date range based on the current view
+      const view = calendar.getViewName();
+      
+      if (view === 'day') {
+        this.dateDisplayTarget.textContent = this.formatDate(currentDate);
+      } else if (view === 'week') {
+        // For week view, show range (e.g., "Aug 1 - 7, 2023")
+        const weekStart = new Date(currentDate);
+        weekStart.setDate(weekStart.getDate() - weekStart.getDay() + (weekStart.getDay() === 0 ? -6 : 1));
+        
+        const weekEnd = new Date(weekStart);
+        weekEnd.setDate(weekStart.getDate() + 6);
+        
+        this.dateDisplayTarget.textContent = `${this.formatDateShort(weekStart)} - ${this.formatDateShort(weekEnd)}`;
+      } else if (view === 'month') {
+        // For month view, show month and year (e.g., "August 2023")
+        this.dateDisplayTarget.textContent = currentDate.toLocaleString('default', { month: 'long', year: 'numeric' });
+      }
+    }
+  }
+  
+  // Helper for formatting dates
+  formatDate(date) {
+    return date.toLocaleDateString('default', { 
+      weekday: 'short', 
+      month: 'short', 
+      day: 'numeric', 
+      year: 'numeric' 
+    });
+  }
+  
+  formatDateShort(date) {
+    return date.toLocaleDateString('default', { 
+      month: 'short', 
+      day: 'numeric'
+    });
+  }
+}