id }}, ...this.newTask, }), }); const data = await response.json(); if (response.ok) { const engineerName = this.engineers.find(e => e.id === this.newTask.engineer_id)?.name || 'Unassigned'; this.tasks.push({ id: data.id, title: this.newTask.title, description: this.newTask.description, engineer_id: this.newTask.engineer_id, engineer_name: engineerName, status: this.newTask.status, priority: this.newTask.priority, }); this.newTask = { title: '', description: '', engineer_id: null, priority: 'medium', status: 'todo' }; this.showAddForm = false; } } catch (error) { console.error('Error:', error); } finally { this.loading = false; } }, async updateTaskStatus(taskId, newStatus) { if (this.loading) return; this.loading = true; try { const response = await fetch(`/api/admin/tasks/\${taskId}/status`, { method: 'PUT', headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': document.querySelector('meta[name=\"csrf-token\"]').content, }, body: JSON.stringify({ status: newStatus }), }); if (response.ok) { const task = this.tasks.find(t => t.id === taskId); if (task) task.status = newStatus; } } catch (error) { console.error('Error:', error); } finally { this.loading = false; } }, async deleteTask(taskId) { if (!confirm('Delete this task?') || this.loading) return; this.loading = true; try { const response = await fetch(`/api/admin/tasks/\${taskId}`, { method: 'DELETE', headers: { 'X-CSRF-Token': document.querySelector('meta[name=\"csrf-token\"]').content, }, }); if (response.ok) { this.tasks = this.tasks.filter(t => t.id !== taskId); } } catch (error) { console.error('Error:', error); } finally { this.loading = false; } } }" class="space-y-4" >