tons fixes

src/pages/service/ServiceCalendar.vue

@@ -17,7 +17,6 @@
         Master Service Calendar
       </div>
 
-      <!-- This component has no sidebar, so the calendar takes up the full content area -->
       <div class="flex h-screen font-sans">
         <div class="flex-1 p-4 overflow-auto">
           <FullCalendar ref="fullCalendar" :options="calendarOptions" />
@@ -28,7 +27,6 @@
 
   <Footer />
 
-  <!-- Re-using the powerful edit modal for this page -->
   <ServiceEditModal
     v-if="selectedServiceForEdit"
     :service="selectedServiceForEdit"
@@ -51,10 +49,10 @@ import ServiceEditModal from './ServiceEditModal.vue';
 import axios from 'axios';
 import authHeader from '../../services/auth.header';
 
-// --- Interfaces ---
 interface ServiceCall {
   id: number;
   scheduled_date: string;
+  customer_id: string;
   customer_name: string;
   customer_address: string;
   customer_town: string;
@@ -67,7 +65,7 @@ export default defineComponent({
   components: { Header, SideBar, Footer, FullCalendar, ServiceEditModal },
   data() {
     return {
-      user: null, // For header/sidebar logic if needed
+      user: null,
       selectedServiceForEdit: null as Partial<ServiceCall> | null,
       calendarOptions: {
         plugins: [dayGridPlugin, interactionPlugin],
@@ -83,7 +81,6 @@ export default defineComponent({
     this.fetchEvents();
   },
   methods: {
-    // This method fetches ALL events for the master calendar
     async fetchEvents(): Promise<void> {
       try {
         const path = `${import.meta.env.VITE_BASE_URL}/service/all`;
@@ -94,30 +91,35 @@ export default defineComponent({
       }
     },
 
-    // This opens the modal when a calendar event is clicked
+    // --- THIS IS THE FIX ---
     handleEventClick(clickInfo: EventClickArg): void {
       const events = (this.calendarOptions.events as any[]) || [];
       const originalEvent = events.find(e => e.id == clickInfo.event.id);
 
       if (originalEvent) {
+          // We "flatten" the nested object from the calendar into the simple,
+          // flat structure that the modal expects.
           this.selectedServiceForEdit = {
               id: originalEvent.id,
               scheduled_date: originalEvent.start,
-              customer_name: originalEvent.title.split(': ')[1] || '',
-              customer_address: '',
-              customer_town: '',
+              customer_id: originalEvent.customer_id,
+              // Extract the customer name from the title
+              customer_name: originalEvent.title.split(': ')[1] || 'Unknown Customer',
+              // Pull the properties out of the nested extendedProps
               type_service_call: originalEvent.extendedProps.type_service_call,
               description: originalEvent.extendedProps.description,
+              
+              // Add dummy values for other fields the ServiceCall interface expects
+              customer_address: '',
+              customer_town: '',
           };
       }
     },
 
-    // Closes the modal
     closeEditModal() {
         this.selectedServiceForEdit = null;
     },
 
-    // Saves changes from the modal and refreshes the calendar
     async handleSaveChanges(updatedService: ServiceCall) {
       try {
         const path = `${import.meta.env.VITE_BASE_URL}/service/update/${updatedService.id}`;
@@ -130,13 +132,12 @@ export default defineComponent({
       }
     },
 
-    // Deletes the service from the modal and refreshes the calendar
     async handleDeleteService(serviceId: number) {
       try {
         const path = `${import.meta.env.VITE_BASE_URL}/service/delete/${serviceId}`;
         const response = await axios.delete(path, { withCredentials: true, headers: authHeader() });
         if (response.data.ok === true) {
-            await this.fetchEvents(); // Refresh the calendar from the database
+            await this.fetchEvents();
             this.closeEditModal();
         } else {
             console.error("Failed to delete event:", response.data.error);
@@ -146,7 +147,6 @@ export default defineComponent({
       }
     },
 
-    // Standard method for user status, e.g., for the header
     userStatus() {
       let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
       axios({