adjust filtering

app/Livewire/Components/Table.php

@@ -0,0 +1,69 @@
+<?php
+
+namespace App\Livewire\Components;
+
+use Livewire\Component;
+
+class Table extends Component
+{
+    public $columns = [];
+    public $rows = [];
+    public $search = '';
+    public $sortField = '';
+    public $sortDirection = 'asc';
+    public $currentPage = 1;
+    public $perPage = 10;
+    public $checkboxes = false;
+    public $showActions = false;
+    public $actions = [];
+    public $addButtonLabel = '';
+    public $searchable = false;  // Add this property
+
+    // Sort the table by the given field
+    public function sortBy($field)
+    {
+        if ($this->sortField === $field) {
+            $this->sortDirection = $this->sortDirection === 'asc' ? 'desc' : 'asc';
+        } else {
+            $this->sortField = $field;
+            $this->sortDirection = 'asc';
+        }
+    }
+
+    // Calculate total pages for pagination
+    public function calculateTotalPages()
+    {
+        return ceil(count($this->rows) / $this->perPage);
+    }
+
+    // Get the paginated rows for the current page
+    public function getPaginatedRowsProperty()
+    {
+        $sorted = collect($this->rows);
+        
+        if ($this->sortField) {
+            $sorted = $this->sortDirection === 'asc'
+                ? $sorted->sortBy($this->sortField)
+                : $sorted->sortByDesc($this->sortField);
+        }
+    
+        return $sorted
+            ->slice(($this->currentPage - 1) * $this->perPage, $this->perPage)
+            ->values();
+    }
+    
+
+    // Set the current page for pagination
+    public function setPage($page)
+    {
+        $this->currentPage = max(1, min($this->calculateTotalPages(), $page));
+    }
+
+    public function render()
+    {
+        return view('livewire.components.table', [
+            'paginatedRows' => $this->paginatedRows, // 👈 explicitly pass computed property
+        ]);
+    }
+    
+}

app/Livewire/UserManagement.php

@@ -7,82 +7,42 @@ use Livewire\Component;
 class UserManagement extends Component
 {
     public $search = '';
-    public $sortField = 'username';
+    public $users = [];
-    public $sortDirection = 'asc';
-    public $currentPage = 1;
-    public $perPage = 10;
-    public $expandEllipsis = false;
 
     protected $queryString = ['search'];
 
-    protected $listeners = ['paginate-to' => 'setPage'];
+    // Reset the current page when search is updated
-
     public function updatingSearch()
     {
-        $this->currentPage = 1;
+        $this->search = $this->search;
     }
 
-    public function sortBy($field)
+    public function mount()
     {
-        if ($this->sortField === $field) {
+        $this->loadUsers();
-            $this->sortDirection = $this->sortDirection === 'asc' ? 'desc' : 'asc';
-        } else {
-            $this->sortField = $field;
-            $this->sortDirection = 'asc';
-        }
     }
 
-    public function searchEnter()
+    // Get filtered users based on the search input
-    {
+    public function loadUsers()
-        $this->currentPage = 1;
-    }
-
-    public function getFilteredUsersProperty()
     {
         $users = collect(json_decode(file_get_contents(storage_path('app/users.json')), true));
     
         if ($this->search) {
-            $users = $users->filter(function ($user) {
+            $this->users = $users->filter(function ($user) {
                 return str_contains(strtolower($user['username']), strtolower($this->search)) ||
                        str_contains(strtolower($user['first_name']), strtolower($this->search)) ||
                        str_contains(strtolower($user['last_name']), strtolower($this->search)) ||
                        str_contains(strtolower($user['email']), strtolower($this->search));
             });
+        } else {
+            $this->users = $users;
         }
-
-        return $users->sortBy([[$this->sortField, $this->sortDirection]])->values();
-    }
-
-    // Change this to a method instead of a property
-    public function calculateTotalPages()
-    {
-        return ceil($this->filteredUsers->count() / $this->perPage);
-    }
-
-    public function getPaginatedUsersProperty()
-    {
-        return $this->filteredUsers
-            ->slice(($this->currentPage - 1) * $this->perPage, $this->perPage)
-            ->values();
-    }
-
-    public function setPage($page)
-    {
-        $this->currentPage = max(1, min($this->calculateTotalPages(), $page));
-        $this->expandEllipsis = false;
-    }
-    public function toggleEllipsis()
-    {
-        $this->expandEllipsis = !$this->expandEllipsis;
     }
 
     public function render()
     {
         return view('livewire.user-management.user-management', [
-            'users' => $this->paginatedUsers,
+            'users' => $this->users,  // Pass filtered users here
-            'totalPages' => $this->calculateTotalPages(), // Now using the method
-            'currentPage' => $this->currentPage,
-            'expandEllipsis' => $this->expandEllipsis,
         ]);
     }
 }

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

@@ -0,0 +1,112 @@
+<div>
+    <div class="p-4 bg-white rounded shadow">
+        <div class="flex justify-between items-center mb-4">
+            @if ($searchable)
+                <input
+                    type="text"
+                    placeholder="Search"
+                    class="border p-2 rounded w-1/3"
+                    wire:model.debounce.300ms="search"
+                >
+            @endif
+            @if ($addButtonLabel)
+                <button class="bg-orange-500 text-white px-4 py-2 rounded hover:bg-orange-600">
+                    {{ $addButtonLabel }}
+                </button>
+            @endif
+        </div>
+
+        <table class="min-w-full text-sm text-left border border-gray-200">
+            <thead class="bg-gray-100">
+                <tr>
+                    @if ($checkboxes)
+                        <th class="p-2"><input type="checkbox" /></th>
+                    @endif
+
+                    @foreach ($columns as $col)
+                        <th
+                            class="p-2 cursor-pointer select-none"
+                            wire:click="sortBy('{{ $col['field'] }}')"
+                        >
+                            <div class="flex items-center space-x-1">
+                                <span>{{ $col['label'] }}</span>
+
+                                {{-- Sort Icons --}}
+                                @if ($sortField === $col['field'])
+                                    @if ($sortDirection === 'asc')
+                                        {{-- Ascending Icon --}}
+                                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-orange-500" fill="currentColor" viewBox="0 0 20 20">
+                                            <path fill-rule="evenodd" d="M10 3l4 6H6l4-6z" clip-rule="evenodd" />
+                                        </svg>
+                                    @else
+                                        {{-- Descending Icon --}}
+                                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-orange-500" fill="currentColor" viewBox="0 0 20 20">
+                                            <path fill-rule="evenodd" d="M10 17l-4-6h8l-4 6z" clip-rule="evenodd" />
+                                        </svg>
+                                    @endif
+                                @else
+                                    {{-- Neutral Sort Icon --}}
+                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
+                                        <path fill-rule="evenodd" d="M6 7h8l-4-4-4 4zm0 6h8l-4 4-4-4z" clip-rule="evenodd" />
+                                    </svg>
+                                @endif
+                            </div>
+                        </th>
+                    @endforeach
+
+                    {{-- Status Column --}}
+
+                    {{-- Actions Column --}}            
+
+
+                    @if ($showActions)
+                        <th class="p-2">Action</th>
+                    @endif
+                </tr>
+            </thead>
+            <tbody>
+                @forelse ($paginatedRows as $row)
+                    <tr class="hover:bg-gray-50">
+                        @if ($checkboxes)
+                            <td class="p-2"><input type="checkbox" /></td>
+                        @endif
+
+                        @foreach ($columns as $col)
+                            <td class="p-2 {{ $col['field'] === 'status' ? 'text-blue-500' : '' }}">
+                                {{ $row[$col['field']] ?? '-' }}
+                            </td>
+                        @endforeach
+
+                        @if ($showActions)
+                            <td class="p-2 flex space-x-2 text-orange-500">
+                                @foreach ($actions as $action)
+                                    <button wire:click="{{ $action['method'] }}({{ $row['id'] ?? 'null' }})">
+                                        {{ $action['icon'] }}
+                                    </button>
+                                @endforeach
+                            </td>
+                        @endif
+                    </tr>
+                @empty
+                    <tr>
+                        <td class="p-2 text-center" colspan="{{ count($columns) + ($checkboxes ? 1 : 0) + ($showActions ? 1 : 0) }}">
+                            No data found.
+                        </td>
+                    </tr>
+                @endforelse
+            </tbody>
+        </table>
+
+        {{-- Pagination Controls --}}
+        <div class="mt-4 flex justify-center space-x-2">
+            @for ($page = 1; $page <= $this->calculateTotalPages(); $page++)
+                <button
+                    wire:click="setPage({{ $page }})"
+                    class="px-3 py-1 border rounded {{ $currentPage === $page ? 'bg-orange-500 text-white' : 'bg-white text-gray-700' }}"
+                >
+                    {{ $page }}
+                </button>
+            @endfor
+        </div>
+    </div>
+</div>

resources/views/livewire/notification/notification.blade.php

@@ -3,3 +3,4 @@
 @include('livewire.notification.top-nav.notification')
 <h1>This is notification page</h1>
 </div>
+

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

@@ -1,62 +1,24 @@
 <div>
-    {{-- Top Nav --}}
+@include('livewire.user-management.top-nav.user-management')
-    @include('livewire.user-management.top-nav.user-management')
+<livewire:components.table 
-
+    :columns="[
-    <div class="p-4 bg-white rounded shadow">
+        ['label' => 'Username', 'field' => 'username'],
-        <div class="flex justify-between items-center mb-4">
+        ['label' => 'First Name', 'field' => 'first_name'],
-            <input
+        ['label' => 'Last Name', 'field' => 'last_name'],
-                type="text"
+        ['label' => 'Role', 'field' => 'role'],
-                placeholder="Search"
+        ['label' => 'Email', 'field' => 'email'],
-                class="border p-2 rounded w-1/3"
+        ['label' => 'Status', 'field' => 'status'],
-                wire:model.debounce.300ms="search"
+    ]"
-                wire:keydown.enter="searchEnter"
+    :rows="$users"
-            >
+    :searchable="true"
-            <button class="bg-orange-500 text-white px-4 py-2 rounded hover:bg-orange-600">Add User</button>
+        :search="$search"
-        </div>
+    :checkboxes="true"
-
+    :showActions="true"
-        <table class="min-w-full text-sm text-left border border-gray-200">
+    :actions="[
-            <thead class="bg-gray-100">
+        ['method' => 'editUser', 'icon' => '✏️'],
-                <tr>
+        ['method' => 'deleteUser', 'icon' => '🗑️'],
-                    <th class="p-2"><input type="checkbox" /></th>
+        ['method' => 'scheduleUser', 'icon' => '⏱️'],
-                    @foreach(['username', 'first_name', 'last_name', 'role', 'email', 'status'] as $field)
+    ]"
-                        <th class="p-2 cursor-pointer select-none" wire:click="sortBy('{{ $field }}')">
+    addButtonLabel="Add User"
-                            <div class="flex items-center space-x-1">
+/>
-                                <span>{{ ucfirst(str_replace('_', ' ', $field)) }}</span>
-                                {{-- Use one consistent icon for all headers --}}
-                                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
-                                    <path d="M10 3l3 4H7l3-4zm0 14l-3-4h6l-3 4z" />
-                                </svg>
-                            </div>
-                        </th>
-                    @endforeach
-                    <th class="p-2">Action</th>
-                </tr>
-            </thead>
-            <tbody>
-                @forelse($users as $user)
-                    <tr class="hover:bg-gray-50">
-                        <td class="p-2"><input type="checkbox" /></td>
-                        <td class="p-2">{{ $user['username'] }}</td>
-                        <td class="p-2">{{ $user['first_name'] }}</td>
-                        <td class="p-2">{{ $user['last_name'] }}</td>
-                        <td class="p-2">{{ $user['role'] }}</td>
-                        <td class="p-2">{{ $user['email'] }}</td>
-                        <td class="p-2 text-blue-500">{{ $user['status'] }}</td>
-                        <td class="p-2 flex space-x-2 text-orange-500">
-                            <button>✏️</button>
-                            <button>🗑️</button>
-                            <button>⏱️</button>
-                        </td>
-                    </tr>
-                @empty
-                    <tr>
-                        <td class="p-2 text-center" colspan="8">No users found.</td>
-                    </tr>
-                @endforelse
-            </tbody>
-        </table>
-
-        {{-- Pagination using component --}}
-        <x-pagination :currentPage="$currentPage" :totalPages="$totalPages" />
-    </div>
 </div>