Active filters:
@foreach ($chips as $chip)
{{ $chip['label'] }}
@endforeach
@if($totalCount !== null)
{{ number_format($totalCount) }} result(s)
@endif
@endif
```
---
### 6. Blade Component — `resources/views/components/table-empty-state.blade.php`
Handles: no records (fresh), no results (filtered), loading, error states.
```blade
@props([
'state' => 'empty', // 'empty' | 'no-results' | 'loading' | 'error'
'message' => null,
'hint' => null,
'createRoute' => null,
'createLabel' => 'Add New',
'resetUrl' => null,
'errorDetails' => null,
])
```
---
### 7. Enhanced `pms-index-datatable.js`
Add `serverSort` mode to `initLaravelPaginated()`. When enabled:
- Clicking a column header does NOT sort the DOM — instead builds a URL with `?sort_col=X&sort_dir=asc` and redirects.
- Current filters/search params are preserved.
- Visual: shows an arrow indicator on the active sort column header.
```js
// New public method: attach server sort to table headers
PmsIndexDataTable.attachServerSort = function(tableSelector, options) {
var $table = $(tableSelector);
var baseUrl = options.baseUrl;
var currentQuery = options.currentQuery || {};
var currentSortCol = options.currentSortCol || '';
var currentSortDir = options.currentSortDir || 'asc';
var colMap = options.colMap || {}; // { colIndex: 'db_column_name' }
$table.find('thead th[data-sort-col]').each(function() {
var $th = $(this);
var col = $th.data('sort-col');
var isActive = col === currentSortCol;
var nextDir = isActive && currentSortDir === 'asc' ? 'desc' : 'asc';
$th.addClass('pms-sortable-th');
if (isActive) {
$th.addClass('pms-sort-active pms-sort-' + currentSortDir);
}
$th.css('cursor', 'pointer').on('click', function() {
var q = $.extend({}, currentQuery, { sort_col: col, sort_dir: nextDir, page: 1 });
window.location.href = baseUrl + '?' + $.param(q);
});
});
};
```
---
## Implementation Steps (Execution Order)
> [!NOTE]
> Each phase is self-contained. We do Phase 1 first, verify nothing breaks, then proceed.
### Phase 1 — Backend Trait + Shared CSS (Foundation)
**Deliverables:**
- `app/Traits/HasTableFilters.php` — new file
- `resources/views/partials/filter-card-styles.blade.php` — new file (centralized CSS)
- `resources/views/components/table-filter-card.blade.php` — new Blade component
- `resources/views/components/per-page-selector.blade.php` — new Blade component
- `resources/views/components/active-filter-chips.blade.php` — new Blade component
- `resources/views/components/table-empty-state.blade.php` — new Blade component
- `public/assets/js/pms-index-datatable.js` — add `attachServerSort` + server sort support
**Risk**: None — new files only, no existing files modified yet.
---
### Phase 2 — Group A: Simple Reference Tables (Designations, Sections, Sectors, MEC*)
For each page in Group A (20 pages), apply the same pattern:
#### Backend (Controller)
1. Add `use HasTableFilters;` trait
2. Replace `new Request(array_merge([...]))` pattern with trait methods
3. Ensure Service `list()` returns `LengthAwarePaginator` not `Collection`
4. Pass `$sort`, `$search`, `$perPage`, `$activeChips` to view
#### Backend (Service / Query)
Update each service's `list()` method to:
```php
->when($search !== '', fn($q) => $q->where('name', 'LIKE', "%{$search}%"))
->orderBy($sortCol, $sortDir)
->paginate($perPage)
```
#### View
1. Remove inline filter CSS → `@include('partials.filter-card-styles')`
2. Add `` with search input + status dropdown
3. Add `` below filter card
4. Switch `PmsIndexDataTable.init()` → `PmsIndexDataTable.initLaravelPaginated()`
5. Add `data-sort-col` attributes to `
` elements
6. Add `PmsIndexDataTable.attachServerSort()` call in scripts
7. Add `` in pagination bar
8. Add proper `` for all states
---
### Phase 3 — Group B: Tier 2 Pages (Users, Plans, PCN, etc.)
For each page in Group B (6 pages), apply the additional features:
#### Backend
1. Add `use HasTableFilters;` trait to controller
2. Add sort resolution: `$sort = $this->resolveTableSort($request, 'id', 'desc', $allowedCols);`
3. Add per-page resolution: `$perPage = $this->resolvePerPage($request, 25);`
4. Pass sort and per-page to Service `list()` (Services already handle the heavy lifting)
5. Return sort/perPage to view
#### View
1. Add search text input to existing filter form (if missing)
2. Add `data-sort-col` attributes to `