Pantalla: Buscar en Catalogo
Identificador: SCR-MED-005
Modulo: MTS-MED-001 - Gestion de Medicamentos
Version: 1.0.0
Fecha: 2025-12-05
Autor: MobileUxUiDrone (Eight of Eight)
Estado: Especificado
| Atributo |
Valor |
| Nombre |
Buscar en Catalogo |
| Proposito |
Busqueda avanzada de medicamentos en el catalogo de referencia |
| Tipo |
Full Screen Overlay |
| Acceso |
Agregar Medicamento > Campo busqueda |
| Prioridad |
Alta |
2. Wireframe ASCII
2.1. Estado Inicial
+------------------------------------------+
| [<] +-----------------------------+ |
| | [Q] Buscar medicamento... | | <- Auto-focus
| +-----------------------------+ |
+------------------------------------------+
| |
| Buscar por: |
| +--------+ +----------+ +--------+ |
| | Nombre | | Principio| | Codigo | | <- Filter chips
| | [x] | | activo | | | |
| +--------+ +----------+ +--------+ |
| |
| Busquedas recientes |
| +------------------------------------+ |
| | [Clock] Metformina | |
| | [Clock] Omeprazol | | <- Recent searches
| | [Clock] Paracetamol | |
| +------------------------------------+ |
| |
| Medicamentos frecuentes |
| +------------------------------------+ |
| | [Pill] Metformina 850mg | |
| | [Cap] Omeprazol 20mg | | <- Frecuentes
| | [Drop] Loratadina 10mg | |
| +------------------------------------+ |
| |
| |
| +------------------------------------+ |
| | [+] No encuentro mi medicamento | | <- Opcion custom
| +------------------------------------+ |
| |
+------------------------------------------+
2.2. Estado: Buscando
+------------------------------------------+
| [<] +-----------------------------+ |
| | [Q] metfor [x] | | <- Query activa
| +-----------------------------+ |
+------------------------------------------+
| |
| +------------------------------------+ |
| | [Spinner] ||
| | Buscando medicamentos... || <- Loading state
| +------------------------------------+ |
| |
+------------------------------------------+
2.3. Estado: Resultados
+------------------------------------------+
| [<] +-----------------------------+ |
| | [Q] metformina [x] | |
| +-----------------------------+ |
+------------------------------------------+
| |
| 12 resultados |
| |
| Genericos | <- Section
| +------------------------------------+ |
| | [Pill] Metformina 500mg ||
| | Tableta - Generico ||
| +------------------------------------+ |
| +------------------------------------+ |
| | [Pill] Metformina 850mg ||
| | Tableta - Generico ||
| +------------------------------------+ |
| +------------------------------------+ |
| | [Pill] Metformina 1000mg ||
| | Tableta - Generico ||
| +------------------------------------+ |
| |
| Marcas comerciales | <- Section
| +------------------------------------+ |
| | [Pill] Glucophage 500mg ||
| | Tableta - Merck ||
| +------------------------------------+ |
| +------------------------------------+ |
| | [Pill] Glucophage XR 750mg ||
| | Liberacion prolongada - Merck ||
| +------------------------------------+ |
| +------------------------------------+ |
| | [Pill] Dabex 850mg ||
| | Tableta - Merck Serono ||
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | [+] No encuentro mi medicamento | |
| +------------------------------------+ |
| |
+------------------------------------------+
2.4. Estado: Sin Resultados
+------------------------------------------+
| [<] +-----------------------------+ |
| | [Q] xyzabcdef [x] | |
| +-----------------------------+ |
+------------------------------------------+
| |
| |
| |
| +----------------+ |
| | | |
| | [Ilustracion | |
| | No encontr] | |
| | | |
| +----------------+ |
| |
| No encontramos "xyzabcdef" |
| |
| Sugerencias: |
| - Verifica la ortografia |
| - Intenta con el nombre generico |
| - Busca por principio activo |
| |
| +----------------------------+ |
| | [+] Agregar manualmente | | <- Fallback CTA
| +----------------------------+ |
| |
| |
+------------------------------------------+
3. Componentes UI
3.1. Search Field
| Propiedad |
Valor |
| Componente |
CMP-INP-002 |
| Variante |
expanding |
| Placeholder |
"Buscar medicamento..." |
| Auto-focus |
Si |
| Clear button |
Si (cuando hay texto) |
| Debounce |
300ms |
| Min chars |
2 |
3.2. Filter Chips
| Propiedad |
Valor |
| Componente |
CMP-DAT-003 |
| Variante |
filter |
| Selection |
Single |
| Default |
"Nombre" |
| Opciones |
Nombre, Principio activo, Codigo |
3.3. Search Result Item
| Elemento |
Especificacion |
| Layout |
ListTile con icono |
| Icono |
CMP-DAT-006 (24x24dp) |
| Titulo |
Nombre medicamento (lg) |
| Subtitulo |
Forma + Fabricante (sm, secondary) |
| Touch target |
56dp height |
| Accion |
Seleccionar y volver |
| Propiedad |
Valor |
| Tipo |
Text header |
| Tipografia |
sm, medium, secondary |
| Padding |
16dp horizontal, 8dp vertical |
4. Logica de Busqueda
4.1. Algoritmo de Busqueda
interface SearchConfig {
query: string;
filterBy: 'name' | 'active_ingredient' | 'code';
limit: number;
offset: number;
}
interface SearchResult {
generics: CatalogMedication[];
brands: CatalogMedication[];
totalCount: number;
suggestions?: string[];
}
// Busqueda fuzzy con tolerancia a typos
function searchMedications(config: SearchConfig): SearchResult {
// 1. Normalizar query (remover acentos, lowercase)
// 2. Buscar coincidencias exactas primero
// 3. Buscar coincidencias parciales
// 4. Aplicar fuzzy matching (Levenshtein)
// 5. Ordenar por relevancia
// 6. Agrupar genericos vs marcas
}
4.2. Priorizacion de Resultados
| Prioridad |
Criterio |
| 1 |
Coincidencia exacta de nombre |
| 2 |
Nombre empieza con query |
| 3 |
Nombre contiene query |
| 4 |
Principio activo coincide |
| 5 |
Match fuzzy (typo tolerance) |
4.3. Fuentes de Datos
| Fuente |
Prioridad |
Disponibilidad |
| Cache local |
1 |
Siempre |
| API MedTime |
2 |
Con conexion |
| RxNorm (fallback) |
3 |
Con conexion |
5. Comportamientos
5.1. Interacciones de Teclado
| Tecla |
Accion |
| Enter |
Buscar (si query >= 2 chars) |
| Escape |
Limpiar campo o cerrar |
| Arrow Down |
Focus primer resultado |
| Arrow Up/Down |
Navegar resultados |
| Enter (en resultado) |
Seleccionar |
5.2. Seleccion de Resultado
- Usuario tap en resultado
- Animacion de seleccion (ripple)
- Pantalla cierra (slide down)
- Datos pre-llenan formulario en SCR-MED-003
- Focus pasa a campo "Dosis"
5.3. Limpiar Busqueda
- Tap en X del campo
- Vuelve a estado inicial
- Muestra recientes y frecuentes
6. Datos Requeridos
interface SearchScreenData {
recentSearches: string[];
frequentMedications: CatalogMedication[];
userCountry: string; // Para filtrar disponibles
}
6.2. Output Events
| Evento |
Payload |
Destino |
| onSelect |
CatalogMedication |
SCR-MED-003 |
| onCustom |
- |
SCR-MED-006 |
| onCancel |
- |
SCR-MED-003 |
| onSearch |
query, filter |
API |
7. Accesibilidad
7.1. Labels
| Elemento |
accessibilityLabel |
| Search field |
"Buscar medicamento. {n} caracteres ingresados" |
| Clear button |
"Limpiar busqueda" |
| Filter chip |
"Filtrar por {tipo}, {estado}" |
| Result item |
"{nombre}, {forma}, {fabricante}" |
| No results |
"No se encontraron resultados para {query}" |
7.2. Live Regions
// Al cargar resultados
aria-live="polite"
"{n} resultados encontrados"
// Sin resultados
aria-live="assertive"
"No se encontraron resultados"
7.3. Orden de Foco
- Back button
- Search field
- Clear button (si visible)
- Filter chips
- Primer resultado / Recent search
- ... (siguientes resultados)
- "Agregar manualmente" button
8.1. Optimizaciones
| Optimizacion |
Implementacion |
| Debounce |
300ms antes de buscar |
| Cache |
LRU cache de queries |
| Paginacion |
20 resultados iniciales |
| Lazy load |
Imagenes de medicamentos |
| Skeleton |
Durante carga |
| Metrica |
Objetivo |
| Time to first result |
< 500ms (cache) |
| Time to first result |
< 2s (API) |
| Render results |
< 16ms (60fps) |
9. Metricas de Analytics
| Evento |
Parametros |
| search_start |
- |
| search_query |
query_length, filter_type |
| search_results |
results_count, time_ms |
| search_no_results |
query |
| result_select |
result_index, result_type |
| search_abandon |
query, time_spent |
| custom_medication_tap |
after_search: boolean |
10. Referencias
Documento generado por MobileUxUiDrone (Eight of Eight)