Fix Livewire BindingResolutionException: replace @this calls in pushed scripts with #[On] + Livewire.emit

- Add #[On] attributes to 5 Livewire component methods:
  - LayerManager::saveManualGeojson
  - ProjectForm::setLocation
  - ProjectMap::selectFeature (already had #[On])
  - TaskForm::closeModal
  - TaskKanban::updateTaskStatus
- Replace @this.method() in @push('scripts') with Livewire.emit() calls
- Fix DataTable event payloads from objects {id: X} to scalars X for:
  - FeatureTable::map-select-feature
  - InspectionTable::map-view-inspection, edit-inspection, delete-inspection

app/Livewire/Layers/LayerManager.php

@@ -5,6 +5,7 @@ namespace App\Livewire\Layers;
 use Livewire\Component;
 use Livewire\WithFileUploads;
 use Livewire\Attributes\Layout;
+use Livewire\Attributes\On;
 use App\Models\Project;
 use App\Models\Phase;
 use App\Models\Layer;
@@ -251,6 +252,7 @@ class LayerManager extends Component
 
     // ── Save drawn GeoJSON ────────────────────────────────────────────────────
 
+    #[On('save-manual-geojson')]
     public function saveManualGeojson($geojsonString)
     {
         if (!$this->selectedLayer) {

app/Livewire/Projects/FeatureTable.php

@@ -69,15 +69,15 @@ class FeatureTable extends DataTableComponent
                   ->html(),
 
             Column::make('Acciones')
-                  ->label(fn ($row) =>
+                              ->label(fn ($row) =>
-                      '<div class="flex justify-end">
+                                  '<div class="flex justify-end">'
-                          <button wire:click="$dispatch(\'map-select-feature\', { id: ' . $row->id . ' })"
+                                      . '<button wire:click="$dispatch(\'map-select-feature\', ' . $row->id . ')"'
-                                  class="btn btn-xs btn-primary gap-1" title="Editar elemento">
+                                              . 'class="btn btn-xs btn-primary gap-1" title="Editar elemento">'
-                              <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
+                                          . '<svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>'
-                              Abrir
+                                          . 'Abrir'
-                          </button>
+                                      . '</button>'
-                      </div>')
+                                  . '</div>')
-                  ->html(),
+                              ->html(),
         ];
     }
 

app/Livewire/Projects/InspectionTable.php

@@ -85,21 +85,21 @@ class InspectionTable extends DataTableComponent
             Column::make('Acciones')
                               ->label(fn ($row) =>
                                   '<div class="flex justify-end gap-1">'
-                                      . '<button wire:click="$dispatch(\'map-view-inspection\', { id: ' . $row->id . ' })"'
+                                      . '<button wire:click="$dispatch(\'map-view-inspection\', ' . $row->id . ')"'
                                               . 'class="btn btn-xs btn-ghost" title="Ver inspección">'
                                           . '<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>'
                                       . '</button>'
                                       . '@can("edit inspections")'
-                                          . '<button wire:click="$dispatch(\'edit-inspection\', { id: ' . $row->id . ' })"'
+                                          . '<button wire:click="$dispatch(\'edit-inspection\', ' . $row->id . ')"'
                                                   . 'class="btn btn-xs btn-ghost" title="Editar inspección">'
                                               . '<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>'
                                           . '</button>'
                                       . '@endcan'
                                       . '@can("delete inspections")'
-                                          . '<button wire:click="$dispatch(\'delete-inspection\', { id: ' . $row->id . ' })"'
+                                          . '<button wire:click="$dispatch(\'delete-inspection\', ' . $row->id . ')"'
                                                   . 'class="btn btn-xs btn-ghost btn-error" title="Eliminar inspección"'
                                                   . 'onclick="return confirm(\'¿Eliminar esta inspección? No se puede deshacer.\');">'
-                                              . '<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>'
+                                              . '<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\"/></svg>'
                                           . '</button>'
                                       . '@endcan'
                                   . '</div>')
@@ -117,9 +117,9 @@ class InspectionTable extends DataTableComponent
         }
 
         $thumbnails = $images->take(3)->map(fn ($m) =>
-            '<a href="' . $m->url . '" target="_blank" class="inline-block mr-1">
+            '<a href="' . $m->url . '" target="_blank" class="inline-block mr-1">'
-                <img src="' . $m->url . '" class="w-8 h-8 object-cover rounded border border-base-300" alt="' . e($m->name) . '" loading="lazy" />
+                . '<img src="' . $m->url . '" class="w-8 h-8 object-cover rounded border border-base-300" alt="' . e($m->name) . '" loading="lazy" />'
-            </a>'
+            . '</a>'
         )->implode('');
 
         $more = $count > 3 ? '<span class="text-xs text-base-content/50 ml-1">+' . ($count - 3) . '</span>' : '';

app/Livewire/Projects/ProjectForm.php

@@ -4,6 +4,7 @@ namespace App\Livewire\Projects;
 
 use Livewire\Component;
 use Livewire\Attributes\Layout;
+use Livewire\Attributes\On;
 use App\Models\Project;
 use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Facades\Gate;
@@ -49,6 +50,8 @@ class ProjectForm extends Component
     }
 
     // Called from JS after map click / marker drag + reverse geocode
+
+    #[On('set-location')]
     public function setLocation(string $lat, string $lng, string $address = '', string $country = ''): void
     {
         $this->lat = $lat;

app/Livewire/Tasks/TaskForm.php

@@ -8,6 +8,7 @@ use App\Models\User;
 use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Str;
 use Livewire\Attributes\Layout;
+use Livewire\Attributes\On;
 use Livewire\Attributes\Validate;
 use Livewire\Component;
 use Livewire\WithFileUploads;
@@ -171,6 +172,7 @@ class TaskForm extends Component
         $this->closeModal();
     }
 
+    #[On('close-modal')]
     public function closeModal(): void
     {
         $this->showModal = false;

app/Livewire/Tasks/TaskKanban.php

@@ -63,6 +63,7 @@ class TaskKanban extends Component
         // Trigger re-render
     }
 
+    #[On('update-task-status')]
     public function updateTaskStatus(Task $task, string $status): void
     {
         abort_unless(Auth::user()->can('update', $task), 403);

resources/views/livewire/layers/layer-manager.blade.php

@@ -199,7 +199,7 @@
             features: features,
             style: { color: allLayersData[currentEditableLayerId]?.color || '#3b82f6' }
         };
-        @this.saveManualGeojson(JSON.stringify(finalGeojson));
+        Livewire.emit('save-manual-geojson', JSON.stringify(finalGeojson));
     }
 
     // Eventos Livewire

resources/views/livewire/projects/feature-manager.blade.php

@@ -1,61 +1,135 @@
-<div class="max-w-5xl mx-auto">
-    <a href="{{ route('projects.dashboard', $project) }}" wire:navigate class="btn btn-ghost btn-sm gap-1 mb-3">
-        <x-heroicon-o-arrow-left class="w-4 h-4" /> Volver
-    </a>
 
-    <div class="flex flex-wrap items-center justify-between gap-3 mb-5">
+<x-slot name="header">
-        <div>
+    <div class="flex items-center justify-between">
-            <h1 class="text-xl font-bold">Elementos del proyecto</h1>
+        {{-- Izquierda: avatar + datos --}}
-            <p class="text-sm text-base-content/60">{{ $project->name }} · editar nombre, tipo, activar/desactivar o eliminar</p>
+        <div class="flex items-center gap-4">
-        </div>
+            {{-- Avatar --}}
-        <a href="{{ route('feature-types') }}" wire:navigate class="btn btn-outline btn-sm gap-1">
+            <div>
-            <x-heroicon-o-tag class="w-4 h-4" /> Tipos de elemento
+                <h2 class="font-bold text-xl leading-tight">{{ $project->name }}</h2>
-        </a>
+                @if($project->description)
-    </div>
+                    <p class="text-sm text-gray-500 leading-tight mt-0.5">{{ Str::limit($project->description, 80) }}</p>
-
+                @endif
-    <livewire:projects.project-features-table :project-id="$project->id" :key="'pft-'.$project->id" />
-
-    {{-- Modal editar elemento --}}
-    @if($showForm)
-        <div class="fixed inset-0 z-40 bg-black/50" wire:click="$set('showForm', false)"></div>
-        <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
-            <div class="bg-base-100 rounded-box shadow-2xl w-full max-w-md">
-                <div class="flex items-center justify-between p-4 border-b border-base-300">
-                    <h3 class="font-bold">Editar elemento</h3>
-                    <button wire:click="$set('showForm', false)" class="btn btn-sm btn-ghost btn-circle"><x-heroicon-o-x-mark class="w-4 h-4" /></button>
-                </div>
-                <form wire:submit.prevent="save" class="p-4 space-y-3">
-                    <div class="form-control">
-                        <label class="label"><span class="label-text font-medium">Nombre <span class="text-error">*</span></span></label>
-                        <input type="text" wire:model="name" autofocus class="input input-bordered w-full @error('name') input-error @enderror" />
-                        @error('name')<span class="text-xs text-error">{{ $message }}</span>@enderror
-                    </div>
-                    <div class="form-control">
-                        <label class="label"><span class="label-text font-medium">Tipo de elemento</span></label>
-                        <select wire:model="featureTypeId" class="select select-bordered w-full">
-                            <option value="">Sin tipo</option>
-                            @foreach($featureTypes as $ft)
-                                <option value="{{ $ft->id }}">{{ $ft->name }}</option>
-                            @endforeach
-                        </select>
-                        @if($featureTypes->isEmpty())
-                            <span class="text-xs text-base-content/50 mt-1">No hay tipos.
-                                <a href="{{ route('feature-types') }}" wire:navigate class="link link-primary">Crear tipos</a>
-                            </span>
-                        @endif
-                    </div>
-                    <div class="form-control">
-                        <label class="flex items-center gap-2 cursor-pointer">
-                            <input type="checkbox" wire:model="isActive" class="toggle toggle-success toggle-sm" />
-                            <span class="label-text">Activo</span>
-                        </label>
-                    </div>
-                    <div class="flex justify-end gap-2 pt-2 border-t border-base-300">
-                        <button type="button" wire:click="$set('showForm', false)" class="btn btn-ghost btn-sm">Cancelar</button>
-                        <button type="submit" class="btn btn-primary btn-sm">Guardar</button>
-                    </div>
-                </form>
             </div>
         </div>
-    @endif
+        
+        {{-- Derecha: estado + botones --}}
+        <div class="flex flex-col items-end gap-2">
+            <div class="flex items-center gap-2">
+                <a href="{{ route('projects.list') }}" class="btn btn-ghost btn-sm px-2">
+                    <x-heroicon-o-arrow-left class="w-4 h-4" /> Volver
+                </a>
+                {{-- Estado --}}
+                @php
+                    $statusCfg = match($project->status) {
+                        'in_progress' => ['badge-primary',  'En progreso'],
+                        'completed'   => ['badge-success',  'Completado'],
+                        'paused'      => ['badge-warning',  'Pausado'],
+                        'planning'    => ['badge-ghost',    'Planificación'],
+                        default       => ['badge-ghost',    ucfirst(str_replace('_',' ',$project->status))],
+                    };
+                @endphp
+                <span class="badge {{ $statusCfg[0] }} badge-sm">{{ $statusCfg[1] }}</span>
+            </div>
+            {{-- Botones --}}
+            <div class="flex gap-2 mt-1">
+                <a href="{{ route('projects.map', $project) }}" class="btn btn-outline btn-sm gap-1">
+                    <x-heroicon-o-map class="w-4 h-4" />
+                    Mapa
+                </a>
+                @can('edit layers')
+                    <a href="{{ route('projects.features', $project) }}" class="btn btn-outline btn-sm gap-1">
+                        <x-heroicon-o-cube class="w-4 h-4" />
+                        Elementos
+                    </a>
+                @endcan
+                @can('edit projects')
+                    <a href="{{ route('projects.templates', $project) }}" class="btn btn-outline btn-sm gap-1">
+                        <x-heroicon-o-clipboard-document-list class="w-4 h-4" />
+                        Plantillas
+                    </a>
+                @endcan
+                <a href="{{ route('projects.gantt', $project) }}" class="btn btn-outline btn-sm gap-1">
+                    <x-heroicon-o-calendar-days class="w-4 h-4" />
+                    Gantt
+                </a>
+                <a href="{{ route('projects.issues', $project) }}" class="btn btn-outline btn-sm gap-1">
+                    <x-heroicon-o-exclamation-triangle class="w-4 h-4" />
+                    Issues
+                </a>
+                @can('view tasks')
+                    <a href="{{ route('projects.tasks', $project) }}" class="btn btn-outline btn-sm gap-1">
+                        <x-heroicon-o-clipboard-document-list class="w-4 h-4" />
+                        Tareas
+                    </a>
+                @endcan
+            </div>
+        </div>
+    </div>
+</x-slot>
+
+<div class="py-6">
+    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+        <a href="{{ route('projects.dashboard', $project) }}" wire:navigate class="btn btn-ghost btn-sm gap-1 mb-3">
+            <x-heroicon-o-arrow-left class="w-4 h-4" /> Volver
+        </a>
+
+        <div class="flex flex-wrap items-center justify-between gap-3 mb-5">
+            <div>
+                <h1 class="text-xl font-bold">Elementos del proyecto</h1>
+                <p class="text-sm text-base-content/60">{{ $project->name }} · editar nombre, tipo, activar/desactivar o eliminar</p>
+            </div>
+            <a href="{{ route('feature-types') }}" wire:navigate class="btn btn-outline btn-sm gap-1">
+                <x-heroicon-o-tag class="w-4 h-4" /> Tipos de elemento
+            </a>
+        </div>
+
+        <div class="bg-white rounded-xl shadow p-6">
+            <livewire:projects.project-features-table :project-id="$project->id" :key="'pft-'.$project->id" />
+        </div>
+    </div>
 </div>
+
+{{-- Modal editar elemento --}}
+@if($showForm)
+    <div class="fixed inset-0 z-40 bg-black/50" wire:click="$set('showForm', false)"></div>
+    <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
+        <div class="bg-base-100 rounded-box shadow-2xl w-full max-w-md">
+            <div class="flex items-center justify-between p-4 border-b border-base-300">
+                <h3 class="font-bold">Editar elemento</h3>
+                <button wire:click="$set('showForm', false)" class="btn btn-sm btn-ghost btn-circle"><x-heroicon-o-x-mark class="w-4 h-4" /></button>
+            </div>
+            <form wire:submit.prevent="save" class="p-4 space-y-3">
+                <div class="form-control">
+                    <label class="label"><span class="label-text font-medium">Nombre <span class="text-error">*</span></span></label>
+                    <input type="text" wire:model="name" autofocus class="input input-bordered w-full @error('name') input-error @enderror" />
+                    @error('name')<span class="text-xs text-error">{{ $message }}</span>@enderror
+                </div>
+                <div class="form-control">
+                    <label class="label"><span class="label-text font-medium">Tipo de elemento</span></label>
+                    <select wire:model="featureTypeId" class="select select-bordered w-full">
+                        <option value="">Sin tipo</option>
+                        @foreach($featureTypes as $ft)
+                            <option value="{{ $ft->id }}">{{ $ft->name }}</option>
+                        @endforeach
+                    </select>
+                    @if($featureTypes->isEmpty())
+                        <span class="text-xs text-base-content/50 mt-1">No hay tipos.
+                            <a href="{{ route('feature-types') }}" wire:navigate class="link link-primary">Crear tipos</a>
+                        </span>
+                    @endif
+                </div>
+                <div class="form-control">
+                    <label class="flex items-center gap-2 cursor-pointer">
+                        <input type="checkbox" wire:model="isActive" class="toggle toggle-success toggle-sm" />
+                        <span class="label-text">Activo</span>
+                    </label>
+                </div>
+                <div class="flex justify-end gap-2 pt-2 border-t border-base-300">
+                    <button type="button" wire:click="$set('showForm', false)" class="btn btn-ghost btn-sm">Cancelar</button>
+                    <button type="submit" class="btn btn-primary btn-sm">Guardar</button>
+                </div>
+            </form>
+        </div>
+    </div>
+@endif
+

resources/views/livewire/projects/project-form.blade.php

@@ -70,7 +70,7 @@
                     country = (d.address && d.address.country_code) ? d.address.country_code : '';
                 }
             } catch (e) { /* geocoding optional */ }
-            @this.setLocation(String(lat), String(lng), address, country);
+            Livewire.emit('set-location', String(lat), String(lng), address, country);
             setStatus('');
         }
 
@@ -86,7 +86,7 @@
                     placeMarker(lat, lng);
                     const address = arr[0].display_name || '';
                     const country = (arr[0].address && arr[0].address.country_code) ? arr[0].address.country_code : '';
-                    @this.setLocation(String(lat), String(lng), address, country);
+                    Livewire.emit('set-location', String(lat), String(lng), address, country);
                     setStatus('');
                 } else {
                     setStatus('{{ __('No results') }}');

resources/views/livewire/projects/project-map.blade.php

@@ -725,7 +725,7 @@
         }
 
         function selectFeature(featureId) {
-            @this.selectFeature(featureId);
+            Livewire.emit('map-select-feature', featureId);
         }
 
         function getUserLocation() {

resources/views/livewire/tasks/task-form.blade.php

@@ -170,7 +170,7 @@
     // Close modal on Escape key
     document.addEventListener('keydown', function(e) {
         if (e.key === 'Escape') {
-            @this.call('closeModal');
+            Livewire.emit('close-modal');
         }
     });
 </script>

resources/views/livewire/tasks/task-kanban.blade.php

@@ -234,7 +234,7 @@
 
                 if (taskId && this.draggedFromStatus !== targetStatus) {
                     // Call Livewire to update status
-                    @this.call('updateTaskStatus', taskId, targetStatus);
+                    Livewire.emit('update-task-status', taskId, targetStatus);
                 }
             },
         };