The format of the results returned by the /api/jobs endpoint has changed to: {"id":5858,"end_time":"2025-04-01T14:54:00.000Z","description":"Fingerprint from photo on signet table","quantity":1,"customer_ref":"7964 / C Wilkinson","job_status":"Complete","customer_name":"Hockley Jewellers","customer_monthly_flag":null,"item_price":"32.50","total_amount":"32.50"}. Update the code to accommodate these changes. - Follow Up Deployment

index.html

@@ -403,8 +403,18 @@
                 // Initialize date range picker
                 initDateRangePicker();
                 
-                // Set current week as default
+                // Set current week as default and fetch week's jobs
+                const today = new Date();
+                const dayOfWeek = today.getDay();
+                const monday = new Date(today);
+                monday.setDate(today.getDate() - (dayOfWeek === 0 ? 6 : dayOfWeek - 1));
+                const friday = new Date(monday);
+                friday.setDate(monday.getDate() + 4);
+                
                 setCurrentWeek();
+                const response = await fetch(`${API_BASE_URL}/jobs?status=completed&startDate=${moment(monday).format('YYYY-MM-DD')}&endDate=${moment(friday).format('YYYY-MM-DD')}`);
+                if (!response.ok) throw new Error('Failed to fetch jobs');
+                jobsData = await response.json();
                 
                 // Render jobs tables
                 renderJobsTable();
@@ -598,6 +608,7 @@
                     
                     jobsData = await response.json();
                     renderJobsTable();
+                    initPieChart(); // Recompute pie chart with new date range
                     
                     // Hide loading overlay
                     document.getElementById('loading-overlay').classList.add('hidden');
@@ -679,9 +690,10 @@
                 row.innerHTML = `
                     <td class="px-6 py-4 whitespace-nowrap">
                         <div class="font-medium text-gray-900">${job.customer_name || 'N/A'}</div>
+                        <div class="text-xs text-gray-500">${job.customer_ref || ''}</div>
                     </td>
                     <td class="px-6 py-4 whitespace-nowrap">
-                        <div class="text-gray-900">${job.job_id}</div>
+                        <div class="text-gray-900">${job.id}</div>
                     </td>
                     <td class="px-6 py-4">
                         <div class="text-gray-900 max-w-xs truncate">${job.description || 'No description'}</div>
@@ -690,10 +702,10 @@
                         <div class="text-gray-900">${job.quantity || 0}</div>
                     </td>
                     <td class="px-6 py-4 whitespace-nowrap">
-                        <div class="text-gray-900">£${(job.price || 0).toFixed(2)}</div>
+                        <div class="text-gray-900">£${parseFloat(job.item_price || 0).toFixed(2)}</div>
                     </td>
                     <td class="px-6 py-4 whitespace-nowrap">
-                        <div class="font-medium text-gray-900">£${((job.quantity || 0) * (job.price || 0)).toFixed(2)}</div>
+                        <div class="font-medium text-gray-900">£${parseFloat(job.total_amount || 0).toFixed(2)}</div>
                     </td>
                     <td class="px-6 py-4 whitespace-nowrap">
                         <img src="${job.thumbnail_url || 'https://via.placeholder.com/100'}" alt="Thumbnail" class="w-12 h-12 object-cover rounded cursor-pointer thumbnail" data-image="${job.image_url || 'https://via.placeholder.com/800'}">
@@ -728,9 +740,10 @@
                 row.innerHTML = `
                     <td class="px-6 py-4 whitespace-nowrap">
                         <div class="font-medium text-gray-900">${job.customer_name || 'N/A'}</div>
+                        <div class="text-xs text-gray-500">${job.customer_ref || ''}</div>
                     </td>
                     <td class="px-6 py-4 whitespace-nowrap">
-                        <div class="text-gray-900">${job.job_id}</div>
+                        <div class="text-gray-900">${job.id}</div>
                     </td>
                     <td class="px-6 py-4">
                         <div class="text-gray-900 max-w-xs truncate">${job.description || 'No description'}</div>
@@ -828,14 +841,22 @@
 
         // Initialize the pie chart
         function initPieChart() {
+            // Clear any existing chart
+            const pieChartCanvas = document.getElementById('pieChart');
+            const existingChart = Chart.getChart(pieChartCanvas);
+            if (existingChart) {
+                existingChart.destroy();
+            }
+
             const customerCounts = {};
             jobsData.forEach(job => {
                 const customer = job.customer_name || 'Unknown';
                 customerCounts[customer] = (customerCounts[customer] || 0) + 1;
             });
             
-            const customers = Object.keys(customerCounts);
-            const counts = Object.values(customerCounts);
+            // Sort customers alphabetically
+            const customers = Object.keys(customerCounts).sort((a, b) => a.localeCompare(b));
+            const counts = customers.map(customer => customerCounts[customer]);
             
             const colors = [
                 'rgba(59, 130, 246, 0.7)',
@@ -845,7 +866,7 @@
                 'rgba(220, 38, 38, 0.7)'
             ];
             
-            const ctx = document.getElementById('pieChart').getContext('2d');
+            const ctx = pieChartCanvas.getContext('2d');
             new Chart(ctx, {
                 type: 'pie',
                 data: {
@@ -931,14 +952,14 @@
                     const job = [...jobsData, ...invalidJobsData].find(j => j.job_id === jobId);
                     
                     if (job) {
-                        document.getElementById('edit-job-id').value = job.job_id;
-                        document.getElementById('edit-job-id-display').value = job.job_id;
+                        document.getElementById('edit-job-id').value = job.id;
+                        document.getElementById('edit-job-id-display').value = job.id;
                         document.getElementById('edit-customer').value = job.customer_name || '';
                         document.getElementById('edit-description').value = job.description || '';
                         document.getElementById('edit-quantity').value = job.quantity || '';
-                        document.getElementById('edit-price').value = job.price || '';
-                        document.getElementById('edit-total').value = (job.quantity || 0) * (job.price || 0);
-                        document.getElementById('edit-end-date').value = job.end_date ? moment(job.end_date).format('YYYY-MM-DD') : '';
+                        document.getElementById('edit-price').value = job.item_price || '';
+                        document.getElementById('edit-total').value = job.total_amount || 0;
+                        document.getElementById('edit-end-date').value = job.end_time ? moment(job.end_time).format('YYYY-MM-DD') : '';
                         document.getElementById('edit-thumbnail').src = job.thumbnail_url || 'https://via.placeholder.com/100';
                         
                         document.getElementById('edit-modal').classList.remove('opacity-0', 'pointer-events-none');
@@ -1089,6 +1110,7 @@
                     
                     jobsData = await response.json();
                     renderJobsTable();
+                    initPieChart(); // Recompute pie chart with new date range
                     
                     // Hide loading overlay
                     document.getElementById('loading-overlay').classList.add('hidden');
@@ -1110,8 +1132,9 @@
                 
                 const filteredJobs = jobsData.filter(job => 
                     (job.customer_name && job.customer_name.toLowerCase().includes(searchTerm)) ||
-                    (job.job_id && job.job_id.toLowerCase().includes(searchTerm)) ||
-                    (job.description && job.description.toLowerCase().includes(searchTerm))
+                    (job.id && job.id.toString().includes(searchTerm)) ||
+                    (job.description && job.description.toLowerCase().includes(searchTerm)) ||
+                    (job.customer_ref && job.customer_ref.toLowerCase().includes(searchTerm))
                 );
                 
                 const tableBody = document.getElementById('jobs-table-body');
@@ -1181,7 +1204,7 @@
                         let valB = b[column] || '';
                         
                         // Handle numeric columns
-                        if (column === 'quantity' || column === 'price' || column === 'total') {
+                        if (column === 'quantity' || column === 'item_price' || column === 'total_amount') {
                             valA = parseFloat(valA) || 0;
                             valB = parseFloat(valB) || 0;
                             return isAsc ? valB - valA : valA - valB;