Busqueda y Filtros de Clientes

Localiza clientes rapidamente usando multiples criterios de busqueda y filtros combinables.

Busqueda por texto

La barra de busqueda busca en:

• Nombre o razon social
• CIF/NIF
• Email
• Telefono

Ejemplos:

• Acme → Encuentra “Acme Software, S.L.”
• A12345678 → Encuentra cliente con ese CIF
• contacto@ → Encuentra clientes con emails que contengan “contacto@”
• 912345 → Encuentra clientes con ese telefono

Consejo

La busqueda no distingue mayusculas/minusculas y busca coincidencias parciales.

Filtros disponibles

Filtro	Opciones	Descripcion
Estado	Activo / Inactivo / Todos	Filtra por estado del cliente
Provincia	Lista dinamica	Provincias de clientes registrados
Pais	Lista dinamica	Paises de clientes registrados
Contacto	Con email / Con telefono / Ambos / Todos	Tipo de contacto disponible

Filtros combinables

Puedes combinar multiples filtros y busqueda:

Ejemplo:

• Busqueda: Madrid
• Filtro Estado: Activo
• Filtro Provincia: Madrid

Resultado: Clientes activos de Madrid con “Madrid” en nombre, CIF, email o telefono.

Como se que lo hice bien

• La tabla se actualiza inmediatamente al escribir o cambiar filtros.
• El texto de busqueda aparece resaltado en amarillo en los resultados.
• Contador de resultados: “Mostrando 8 de 42 clientes”.

Limpiar filtros

Clic en “Limpiar filtros” — resetea busqueda y filtros a valores por defecto.

🔧 Detalles Tecnicos — Busqueda y Filtros

Componentes:

• Tabla: CustomerTableMemo.tsx — Renderizado optimizado con memo
• Filtros compactos: CompactCustomersFilters.tsx
• Filtros avanzados: AdvancedCustomersFilters.tsx

Busqueda:

• Implementacion: Query Supabase con operador .or() en multiples columnas
• Query:

  query.or(`name.ilike.%${search}%,cif_nif.ilike.%${search}%,email.ilike.%${search}%,phone.ilike.%${search}%`)

• Operador ilike — Busqueda case-insensitive

Filtros:

Filtro	Query Supabase
Estado	.eq('is_active', true/false)
Provincia	.eq('province', '<provincia>')
Pais	.eq('country', '<pais>')
Con email	.not('email', 'is', null)
Con telefono	.not('phone', 'is', null)

Adapter:

• Metodo: list(filters?: CustomerListFilters): Promise<Customer[]>
• Metodo: search(query: string): Promise<Customer[]>

Optimizaciones:

• Memoizacion: useMemo para provincias y paises unicos
• Debounce: Busqueda con retraso de 300ms para evitar queries excesivas
• Paginacion: 50 clientes por pagina

Queries de diagnostico:

-- Busqueda completa
SELECT * FROM customers
WHERE business_id = '<business_id>'
  AND (
    name ILIKE '%<search>%' OR
    cif_nif ILIKE '%<search>%' OR
    email ILIKE '%<search>%' OR
    phone ILIKE '%<search>%'
  );

-- Filtros combinados
SELECT * FROM customers
WHERE business_id = '<business_id>'
  AND is_active = true
  AND province = 'Madrid'
  AND email IS NOT NULL;

-- Provincias unicas
SELECT DISTINCT province
FROM customers
WHERE business_id = '<business_id>'
ORDER BY province;

Resaltado de texto:

• Funcion: highlightText(text, search) en CustomerTableMemo.tsx
• Usa <mark> HTML con clase bg-yellow-200