user crud functionality added

app/Livewire/Buttons/CreateUser.php

@@ -49,6 +49,7 @@ class CreateUser extends Component
 
         $token = Session::get('user')['access_token'] ?? null;
         
+
         if (!$token) {
             $this->addError('users', 'No access token found.');
             return;
@@ -64,6 +65,9 @@ class CreateUser extends Component
             'password'   => $this->default_password,
         ]);
 
+        // dd($response->json());
+
+
         //handle backend response
         if ($response->status() === 422) {
             $errors = $response->json('data');

app/Livewire/Components/Table.php

@@ -45,6 +45,23 @@ class Table extends Component
     public $showModal = false;
     public $modalMode = 'view';
     public $modalData = [];
+    public $confirmingDeleteId = null;
+
+    public function confirmDelete($id)
+{
+    $this->confirmingDeleteId = $id;
+}
+
+public function deleteConfirmed()
+{
+    if (!$this->confirmingDeleteId) return;
+
+    $this->deleteRow($this->confirmingDeleteId);
+
+    // Reset the confirmation state
+    $this->confirmingDeleteId = null;
+}
+
 
     public function mount($columns, $rows, $addRoute = null, $rowKey = 'id')
     {
@@ -99,6 +116,29 @@ public function saveRow()
         }
     }
 
+    public function deleteRow($id)
+    {
+        $token = Session::get('user')['access_token'] ?? null;
+
+        $url = rtrim(config('services.backend_api.url'), '/') . '/' . $this->deleteEndpoint . '/' . $id;
+
+        try {
+            $response = Http::withToken($token)->delete($url);
+
+            if ($response->successful()) {
+                $this->fetchData();
+            } else {
+                $errors = $response->json('errors') ?? [];
+                foreach ($errors as $field => $messages) {
+                    $this->addError("modalData.$field", is_array($messages) ? $messages[0] : $messages);
+                }
+            }
+        } catch (\Exception $e) {
+            logger()->error('DeleteRow error: ' . $e->getMessage());
+            $this->addError('modalData', 'Something went wrong. Please try again.');
+        }
+    }
+
 
 
     public function closeModal()

app/Livewire/UserManagement.php

@@ -42,6 +42,7 @@ class UserManagement extends Component
                     'status' => $user['status'],
                 ];
             });
+
             } else {
                 $this->addError('users', 'Failed to load users.');
             }
@@ -57,4 +58,3 @@ class UserManagement extends Component
         ]);
     }
 }
-

docker-compose.yml

@@ -20,7 +20,7 @@ services:
       timeout: 10s
       retries: 10
     networks:
-      - app_network
+      - unioil-network
 
 
   db_mysql:
@@ -40,14 +40,14 @@ services:
       timeout: 10s
       retries: 5
     networks:
-      - app_network
+      - unioil-network
 
   nginx:
     image: nginx:alpine
     container_name: unioil-nginx
     restart: unless-stopped
     ports:
-      - "8000:80"
+      - "8000:81"
     volumes:
       - .:/var/www/html
       - ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf:ro
@@ -55,7 +55,7 @@ services:
       app:
         condition: service_healthy
     networks:
-      - app_network
+      - unioil-network
 
 volumes:
   mysql-data:
@@ -63,5 +63,5 @@ volumes:
     driver: local
 
 networks:
-  app_network:
+  unioil-network:
     driver: bridge

docker/nginx/default.conf

@@ -1,5 +1,5 @@
 server {
-    listen 80;
+    listen 81;
     server_name localhost;
 
     root /var/www/html/public;

package-lock.json

@@ -1,5 +1,5 @@
 {
-    "name": "unioil-cms-fe",
+    "name": "html",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {

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

@@ -33,7 +33,7 @@
 
             @if ($hasAddButton ?? true)
             <!-- Add button -->
-            <a href="{{ $addRoute }}" class="bg-orange-600 text-white px-4 py-2 rounded">
+            <a href="{{ $addRoute }}" class="bg-orange-600 text-white px-4 py-2 rounded hover:bg-orange-700">
                 + Add
             </a>
             @elseif ($hasExportButton ?? false)
@@ -115,7 +115,7 @@
                         <button wire:click="viewRow('{{ $row[$rowKey] ?? $index }}')" class="text-gray-500 hover:text-gray-700">
                             <i class="fas fa-eye"></i>
                         </button>
-                        <button wire:click="deleteRow('{{ $row[$rowKey] ?? $index }}')" class="text-red-500 hover:text-red-700">
+                        <button wire:click="confirmDelete('{{ $row[$rowKey] ?? $index }}')" class="text-red-500 hover:text-red-700">
                             <i class="fas fa-trash-alt"></i>
                         </button>
                         @endif
@@ -196,9 +196,18 @@
                         <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'] }}"
+                        @if ($column['type'] === 'select')
+                        <select wire:model.defer="modalData.{{ $column['field'] }}" class="mt-1 p-2 border border-gray-300 rounded w-full">
+                            @foreach ($column['options'] as $key => $label)
+                            <option value="{{ $key }}">{{ $label }}</option>
+                            @endforeach
+                        </select>
+                        @else
+                        <input type="{{ $column['type'] }}" wire:model.defer="modalData.{{ $column['field'] }}"
                             class="mt-1 p-2 border border-gray-300 rounded w-full">
+                        @endif
                         @else
                         <div class="mt-1 p-2 bg-gray-100 rounded">
                             {{ $modalData[$column['field']] ?? '' }}
@@ -211,7 +220,7 @@
                 <!-- Modal Footer with Save Button (if in edit mode) -->
                 @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">
+                    <button wire:click="saveRow" class="px-4 py-2 bg-orange-600 text-white rounded hover:bg-orange-700">
                         Save
                     </button>
                 </div>
@@ -219,5 +228,26 @@
             </div>
         </div>
         @endif
+
+        <!-- Confirmation Modal for Deletion -->
+        @if ($confirmingDeleteId)
+        <div class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
+            <div class="bg-white rounded-lg shadow-lg p-6 w-full max-w-md">
+                <h2 class="text-lg font-bold mb-4">Confirm Delete</h2>
+                <p class="mb-6">Are you sure you want to delete this item? This action cannot be undone.</p>
+
+                <div class="flex justify-end space-x-2">
+                    <button wire:click="$set('confirmingDeleteId', null)" class="px-4 py-2 bg-gray-300 text-gray-800 rounded-md hover:bg-gray-400">
+                        Cancel
+                    </button>
+                    <button wire:click="deleteConfirmed" class="px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 cursor-pointer">
+                        Yes, Delete
+                    </button>
+                </div>
+            </div>
+        </div>
+        @endif
+
+
     </div>
 </div>

resources/views/livewire/user-management/user-management.blade.php

@@ -7,8 +7,7 @@
         x-init="setTimeout(() => show = false, 3000)"
         x-show="show"
         x-transition
-        class="text-2xl text-green-700 px-4 py-2 rounded mb-4"
+        class="text-2xl text-green-700 px-4 py-2 rounded mb-4">
-    >
         ✅ {{ session('success') }}
     </div>
     @endif
@@ -17,12 +16,18 @@
 
     <livewire:components.table
         :columns="[
-            ['label' => 'Username', 'field' => 'username'],
+            ['label' => 'Username', 'field' => 'username', 'type' => 'text'],
-            ['label' => 'First Name', 'field' => 'firstname'],
+            ['label' => 'First Name', 'field' => 'firstname', 'type' => 'text'],
-            ['label' => 'Last Name', 'field' => 'lastname'],
+            ['label' => 'Last Name', 'field' => 'lastname', 'type' => 'text'],
-            ['label' => 'Email', 'field' => 'email'],
+            ['label' => 'Email', 'field' => 'email', 'type' => 'text'],
-            ['label' => 'Role', 'field' => 'role'],
+            ['label' => 'Role', 'field' => 'role', 'type' => 'select', 'options' => [
-            ['label' => 'Status', 'field' => 'status'],
+                                                                1 => 'Admin',
+                                                                0 => 'Marketing Personnel'
+                                                            ]],
+            ['label' => 'Status', 'field' => 'status', 'type' => 'select', 'options' =>[
+                                                                'active' => 'Active',
+                                                                'inactive' => 'Inactive'
+                                                            ]],
             ]"
         :rows="$users"
         :addRoute="route('user-create')"
@@ -32,5 +37,6 @@
         :isViewPage="false"
         :rowKey="'admin_uuid'"
         :updateEndpoint="'api/cms/admin'" 
+        :deleteEndpoint="'api/cms/admin'"
         />
 </div>

routes/web.php

@@ -24,13 +24,13 @@ use Illuminate\Support\Facades\Route;
 
 
 //laravel page
-// Route::get('/', function () {
+Route::get('/', function () {
-//     return redirect()->route('login'); 
+    return redirect()->route('login'); 
-// });
+});
-// Route::get('/login', function () {
+Route::get('/login', function () {
-//     return view('auth.log-in');
+    return view('auth.log-in');
-// })->name('login');
+})->name('login');
-Route::get('/login', LoginForm::class)->name('login');
+// Route::get('/login', LoginForm::class)->name('login');
 
 // // Route::get('/login', LoginForm::class)->name('layouts.app');