public function index(\Illuminate\Http\Request $request): \Inertia\Response
{
    $filters = $request->validate([
        'search' => ['nullable', 'string', 'max:100'],
        'status' => ['nullable', 'in:active,inactive'],
    ]);

    return \Inertia\Inertia::render('Users/Index', [
        'filters' => $filters,
        'users' => fn () => \App\Models\User::query()
            ->when($filters['search'] ?? null, function ($query, $search) {
                $query->where(function ($query) use ($search) {
                    $query->where('name', 'like', "%{$search}%")
                        ->orWhere('email', 'like', "%{$search}%");
                });
            })
            ->when(($filters['status'] ?? null) === 'active', fn ($q) => $q->where('active', true))
            ->when(($filters['status'] ?? null) === 'inactive', fn ($q) => $q->where('active', false))
            ->latest('id')
            ->paginate(15)
            ->withQueryString(),
        'roles' => fn () => \App\Models\Role::query()->orderBy('name')->get(['id', 'name']),
    ]);
}

import { router } from '@inertiajs/react'
import { useEffect, useState } from 'react'

type Filters = { search?: string; status?: string }

export function UserFilters({ filters }: { filters: Filters }) {
  const [search, setSearch] = useState(filters.search ?? '')
  const [status, setStatus] = useState(filters.status ?? '')

  useEffect(() => {
    const timeout = window.setTimeout(() => {
      router.get(
        '/users',
        { search: search || undefined, status: status || undefined },
        {
          preserveState: true,
          preserveScroll: true,
          replace: true,
          only: ['users', 'filters'],
        },
      )
    }, 300)

    return () => window.clearTimeout(timeout)
  }, [search, status])

  return (
    <div className="flex gap-3">
      <input
        value={search}
        onChange={(e) => setSearch(e.target.value)}
        placeholder="Tìm tên hoặc email"
      />

      <select value={status} onChange={(e) => setStatus(e.target.value)}>
        <option value="">Tất cả</option>
        <option value="active">Đang hoạt động</option>
        <option value="inactive">Ngừng hoạt động</option>
      </select>
    </div>
  )
}

const params = {
    search: search || undefined,
    status: status === 'all' ? undefined : status,
    sort: sort === 'latest' ? undefined : sort,
}

$sorts = [
    'name' => ['name', 'asc'],
    '-name' => ['name', 'desc'],
    'price' => ['price', 'asc'],
    '-price' => ['price', 'desc'],
];

[$column, $direction] = $sorts[$filters['sort'] ?? '-created_at']
    ?? ['created_at', 'desc'];

$query->orderBy($column, $direction);

if (products.data.length === 0) {
    return filters.search || filters.status
        ? <FilteredEmptyState onClear={clearFilters} />
        : <FirstProductEmptyState />
}

router.get(route('products.index'), {
    ...nextFilters,
    page: undefined,
})