feat: Filtra clientes.

This commit is contained in:
LukiBeg 2025-12-10 18:06:26 -03:00
parent 1c8f03a45d
commit 6b38865074
1 changed files with 68 additions and 27 deletions

View File

@ -1,6 +1,46 @@
<div class="container grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="container">
<div class="flex justify-center">
<div class="w-full max-w-md mb-6">
<div x-data="{ query: @entangle('filters') }" class="relative rounded-md shadow-sm">
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
<svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clip-rule="evenodd" />
</svg>
</div>
<input
type="text"
wire:model.live.debounce.10ms="filters"
x-model="query"
name="search"
id="search"
class="block w-full outline-none rounded-md bg-white border-0 py-2 pl-10 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
placeholder="Buscar por nome, email..."
@keyup.enter="$dispatch('filters-added')"
>
<div
x-show="query"
style="display: none;"
class="absolute inset-y-0 right-0 flex items-center pr-3">
<button
@click="query = ''; $wire.set('filters', '')"
type="button"
class="text-gray-400 hover:text-gray-600 focus:outline-none">
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
@foreach ($clients as $client)
<div class="client-card">
<div class="client-card" wire:transition.scale.origin.top.duration.300ms>
<div class="client-card-header">
<div class="client-avatar">
<img src="{{ asset('storage/' . $client->profile_image_path) }}" x-on:click.prevent="$dispatch('client-detail', { id: '{{ $client->id }}' })" alt="Avatar do Cliente"
@ -31,4 +71,5 @@ class="w-32 h-32 rounded-full object-cover cursor-pointer">
</div>
</div>
@endforeach
</div>
</div>