Filter builder Blade component for Laravel and Livewire

use App\View\Widget\FilterField;
use App\View\Widget\FilterOperator;
use App\View\Widget\Filters;

$filters = Filters::make([
    FilterField::text('number', 'Order number'),
    FilterField::choice('status', 'Status', ['paid' => 'Paid', 'pending' => 'Pending', 'refunded' => 'Refunded']),
    FilterField::dateTime('placed', 'Placed')->column('created_at'),
    FilterField::number('amount', 'Amount')->column('total'),
    // Every condition a text field offers, on the customer's name. The negative ones (doesn't contain, is not, is empty)
    // keep orders with no such customer, as a field of the order's own keeps rows with nothing in it.
    FilterField::text('customer', 'Customer')->using(function ($query, FilterOperator $operator, ?string $value) {
        $text = str_replace(['!', '%', '_'], ['!!', '!%', '!_'], (string) $value);
        $like = "LOWER(name) LIKE LOWER(?) ESCAPE '!'";
        [$sql, $binding] = match ($operator) {
            FilterOperator::Contains, FilterOperator::NotContains => [$like, "%{$text}%"],
            FilterOperator::StartsWith => [$like, "{$text}%"],
            FilterOperator::EndsWith => [$like, "%{$text}"],
            FilterOperator::Is, FilterOperator::IsNot => ['LOWER(name) = LOWER(?)', (string) $value],
            // Is empty and isn't empty: whether there's a customer with a name.
            default => ["COALESCE(name, '') <> ?", ''],
        };
        $has = ! in_array($operator, [FilterOperator::NotContains, FilterOperator::IsNot, FilterOperator::Empty], true);

        return $query->{$has ? 'whereHas' : 'whereDoesntHave'}('customer', fn ($customer) => $customer->whereRaw($sql, [$binding]));
    }),
]);

// In the person's time zone, so "placed on 11 November" is their 11 November.
$state = $filters->read($request->query('filters'), timezone: $request->user()->timezone);

// On a query already limited to what they may see: the filters only ever narrow it.
$orders = $filters->apply($request->user()->orders()->getQuery(), $state)
    ->latest()
    ->paginate(20)
    ->withQueryString();

// The view needs only the state: <x-widget.filter-builder :state="$state" />. It brings the fields with it.
return view('orders.index', ['orders' => $orders, 'state' => $state]);

use App\View\Widget\FilterField;
use App\View\Widget\Filters;
use Livewire\Attributes\Url;
use Livewire\Component;
use Livewire\WithPagination;

class Orders extends Component
{
    use WithPagination;

    #[Url]
    public string $filters = '';

    public function updatedFilters(): void
    {
        $this->resetPage();
    }

    public function render()
    {
        $fields = Filters::make([
            FilterField::text('number', 'Order number'),
            FilterField::choice('status', 'Status', ['paid' => 'Paid', 'pending' => 'Pending', 'refunded' => 'Refunded']),
            FilterField::dateTime('placed', 'Placed')->column('created_at'),
            FilterField::number('amount', 'Amount')->column('total'),
        ]);
        // The browser can set the property to anything: read() keeps only what the fields allow.
        $state = $fields->read($this->filters, timezone: auth()->user()->timezone);

        return view('livewire.orders', [
            'state' => $state,
            'orders' => $fields->apply(auth()->user()->orders()->getQuery(), $state)->latest()->paginate(20),
        ]);
    }
}

<x-widget.filter-builder :state="$state" wire:model.live="filters" label="Filter orders" />

<x-widget.table caption="Orders" :rows="$orders" :columns="[['label' => 'Order'], ['label' => 'Status'], ['label' => 'Amount', 'align' => 'end']]">
    @foreach ($orders as $order)
        <x-widget.table.row>
            <td>{{ $order->number }}</td>
            <td>{{ $order->status }}</td>
            <td>{{ $order->total }}</td>
        </x-widget.table.row>
    @endforeach
</x-widget.table>