modal for actions added

app/Livewire/Components/Table.php

@@ -19,6 +19,31 @@ class Table extends Component
     public $sortField = null;   // Column to sort
     public $sortDirection = 'asc';  // Default sort direction
 
+    // Inside App\Livewire\Components\Table
+
+public $showModal = false;
+public $modalMode = 'view'; // or 'edit'
+public $modalData = [];
+
+public function viewRow($id)
+{
+    $this->modalData = collect($this->rows)->firstWhere('id', $id) ?? [];
+    $this->modalMode = 'view';
+    $this->showModal = true;
+}
+
+public function editRow($id)
+{
+    $this->modalData = collect($this->rows)->firstWhere('id', $id) ?? [];
+    $this->modalMode = 'edit';
+    $this->showModal = true;
+}
+
+public function closeModal()
+{
+    $this->showModal = false;
+    $this->modalData = [];
+}
 
     public function mount($columns, $rows, $addRoute = null)
     {
@@ -53,7 +78,7 @@ class Table extends Component
         }
     }
 
-    // Simplified version
+    // Sorting
     public function sortBy($field)
     {
         if ($this->sortField === $field) {

resources/views/livewire/components/table.blade.php

@@ -79,6 +79,42 @@
                         @endif
                     </td>
                     @endif
+                    @if ($showModal)
+                    <div class="fixed inset-0 bg-gray-900 bg-opacity-50 flex items-center justify-center z-50">
+                        <div class="bg-white p-6 rounded-lg shadow-lg w-1/2">
+                            <div class="flex justify-between items-center mb-4">
+                                <h2 class="text-lg font-semibold">
+                                    {{ $modalMode === 'view' ? 'View Details' : 'Edit Details' }}
+                                </h2>
+                                <button wire:click="closeModal" class="text-gray-600 hover:text-gray-800">&times;</button>
+                            </div>
+                            <div class="space-y-4">
+                                @foreach ($columns as $column)
+                                <div>
+                                    <label class="block text-sm font-medium text-gray-700">
+                                        {{ $column['label'] }}
+                                    </label>
+                                    @if ($modalMode === 'edit')
+                                    <input type="text" wire:model.defer="modalData.{{ $column['field'] }}"
+                                        class="mt-1 p-2 border border-gray-300 rounded w-full">
+                                    @else
+                                    <div class="mt-1 p-2 bg-gray-100 rounded">
+                                        {{ $modalData[$column['field']] ?? '' }}
+                                    </div>
+                                    @endif
+                                </div>
+                                @endforeach
+                            </div>
+                            @if ($modalMode === 'edit')
+                            <div class="mt-6 flex justify-end">
+                                <button wire:click="saveRow" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
+                                    Save
+                                </button>
+                            </div>
+                            @endif
+                        </div>
+                    </div>
+                    @endif
                 </tr>
                 @empty
                 <tr>