-
💳
-
+
+
+
+
-
-
Active Prescriptions
-
Tap a medicine to check availability at nearby pharmacies.
-
- {loadingPrescriptions && (
-
-
-
Loading prescriptions…
-
- )}
-
- {!loadingPrescriptions && prescriptions.length === 0 && (
-
No active prescriptions found for this card.
- )}
-
-
- {prescriptions.map((rx, i) => (
- -
-
-
- ))}
-
-
-
+
Escanear TSI
+
Escanea el código de barras de tu tarjeta sanitaria para ver tus recetas activas
- )}
+
+ {phase !== 'prescriptions' && (
+ <>
+ {phase === 'error' && (
+
+
+
{errorMsg}
+
+
+ )}
+
+ {phase === 'idle' && (
+
+ )}
+
+ {phase === 'scanning' && !isNative && (
+
+
+
+
Apunta al código de barras
+
+ )}
+
+ {phase === 'scanning' && isNative && (
+
+ )}
+
+
+
+ )}
+
+ {phase === 'prescriptions' && (
+
+
+
+
+
TSI Escaneada
+
{scannedCip}
+
+
+
+
Recetas Activas
+
Toca un medicamento para ver disponibilidad en farmacias cercanas.
+
+ {loadingPrescriptions && (
+
+ )}
+
+ {!loadingPrescriptions && prescriptions.length === 0 && (
+
No se encontraron recetas activas para esta tarjeta.
+ )}
+
+
+ {prescriptions.map((rx, i) => (
+ -
+
+
+ ))}
+
+
+
+
+ )}
+
);
}
diff --git a/frontend/src/views/SearchView.css b/frontend/src/views/SearchView.css
new file mode 100644
index 0000000..b2a734a
--- /dev/null
+++ b/frontend/src/views/SearchView.css
@@ -0,0 +1,295 @@
+.search-view {
+ width: 100%;
+ max-width: 48rem;
+ margin: 0 auto;
+}
+
+.search-content {
+ padding: 1rem var(--margin-main) 2rem;
+ animation: fadeInUp 0.5s ease-out;
+}
+
+.section-title {
+ font-size: 1.5rem;
+ font-weight: 700;
+ color: var(--on-surface);
+ margin-bottom: 1.25rem;
+ line-height: 1.2;
+}
+
+.suggestions-section {
+ margin-bottom: 2rem;
+}
+
+.suggestions-grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: var(--gutter);
+}
+
+.suggestion-btn {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 0.75rem;
+ padding: var(--card-padding);
+ border: none;
+ border-radius: var(--radius-md);
+ cursor: pointer;
+ text-align: left;
+ transition: all 0.15s;
+}
+
+.suggestion-btn:active {
+ transform: scale(0.96);
+}
+
+.suggestion-btn--primary {
+ background: var(--primary);
+ color: var(--on-primary);
+}
+
+.suggestion-btn--secondary {
+ background: var(--secondary);
+ color: var(--on-secondary);
+}
+
+.suggestion-btn--tertiary {
+ background: var(--tertiary-container);
+ color: var(--on-tertiary);
+}
+
+.suggestion-btn--tint {
+ background: var(--surface-tint);
+ color: var(--on-primary);
+}
+
+.suggestion-icon {
+ width: 2.5rem;
+ height: 2.5rem;
+ border-radius: var(--radius);
+ background: rgba(255, 255, 255, 0.2);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.suggestion-name {
+ font-size: 1.125rem;
+ font-weight: 700;
+ line-height: 1.2;
+}
+
+.recent-section {
+ margin-bottom: 2rem;
+}
+
+.recent-list {
+ display: flex;
+ flex-direction: column;
+ gap: var(--gutter);
+}
+
+.recent-card {
+ background: var(--surface-container-lowest);
+ border-radius: var(--radius-md);
+ box-shadow: var(--shadow-soft);
+ padding: var(--card-padding);
+ display: flex;
+ flex-direction: column;
+ gap: 0.75rem;
+ border: 1px solid var(--outline-variant);
+}
+
+.recent-card-top {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ gap: 0.5rem;
+}
+
+.recent-name {
+ font-size: 1.25rem;
+ font-weight: 700;
+ color: var(--primary);
+ line-height: 1.2;
+}
+
+.recent-detail {
+ font-size: 1rem;
+ color: var(--on-surface-variant);
+ margin-top: 0.125rem;
+}
+
+.recent-tag {
+ padding: 0.25rem 0.75rem;
+ background: var(--secondary-fixed);
+ color: var(--on-secondary-fixed-variant);
+ border-radius: var(--radius-full);
+ font-size: 0.875rem;
+ font-weight: 600;
+ white-space: nowrap;
+}
+
+.recent-distance {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ color: var(--primary);
+ font-weight: 700;
+ font-size: 0.875rem;
+}
+
+.recent-btn {
+ width: 100%;
+ height: var(--touch-target-min);
+ background: var(--primary-container);
+ color: var(--on-primary-container);
+ border: none;
+ border-radius: var(--radius-md);
+ font-size: 1rem;
+ font-weight: 700;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.5rem;
+ transition: opacity 0.15s;
+}
+
+.recent-btn:active {
+ opacity: 0.85;
+}
+
+.loading {
+ text-align: center;
+ color: var(--on-surface-variant);
+ font-size: 1rem;
+ font-weight: 500;
+ margin: 3rem 0;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ align-items: center;
+}
+
+.loading::after {
+ content: "";
+ width: 36px;
+ height: 36px;
+ border: 3px solid var(--outline-variant);
+ border-top-color: var(--primary);
+ border-radius: 50%;
+ animation: spin 0.75s linear infinite;
+}
+
+.selected-medicine-section {
+ margin-top: 1.5rem;
+ max-height: 60vh;
+ overflow-y: auto;
+ overscroll-behavior: contain;
+}
+
+.medicine-info {
+ background: var(--surface-container-lowest);
+ border-radius: var(--radius-md);
+ padding: 1.5rem;
+ margin-bottom: 1.5rem;
+ box-shadow: var(--shadow-soft);
+ border: 1px solid var(--outline-variant);
+}
+
+.medicine-info h2 {
+ color: var(--on-surface);
+ margin-bottom: 1rem;
+ font-size: 1.75rem;
+ font-weight: 700;
+}
+
+.medicine-details {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+ gap: 1rem;
+ margin-bottom: 1.5rem;
+ padding: 1rem;
+ background: var(--surface-container-low);
+ border-radius: var(--radius);
+ border: 1px solid var(--outline-variant);
+}
+
+.medicine-details span {
+ font-size: 0.95rem;
+ color: var(--on-surface-variant);
+ display: flex;
+ flex-direction: column;
+ gap: 0.2rem;
+}
+
+.medicine-details strong {
+ color: var(--on-surface);
+ font-size: 0.75rem;
+ text-transform: uppercase;
+ letter-spacing: 0.06em;
+}
+
+.back-button {
+ background: var(--surface-container-low);
+ color: var(--on-surface);
+ border: 1px solid var(--outline-variant);
+ padding: 0.75rem 1.5rem;
+ border-radius: var(--radius);
+ cursor: pointer;
+ font-size: 0.9rem;
+ font-weight: 600;
+ transition: background 0.15s;
+}
+
+.back-button:hover {
+ background: var(--surface-container);
+}
+
+.pharmacy-controls {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ margin: 1rem 0 0.5rem;
+ flex-wrap: wrap;
+}
+
+.sort-distance-button {
+ background: var(--surface-container-lowest);
+ color: var(--on-surface);
+ border: 1px solid var(--outline-variant);
+ padding: 0.6rem 1.1rem;
+ border-radius: var(--radius-full);
+ cursor: pointer;
+ font-size: 0.85rem;
+ font-weight: 600;
+ transition: all 0.15s;
+}
+
+.sort-distance-button:hover:not(:disabled) {
+ border-color: var(--primary);
+ color: var(--primary);
+}
+
+.sort-distance-button.active {
+ background: var(--primary);
+ border-color: var(--primary);
+ color: var(--on-primary);
+}
+
+.sort-distance-button:disabled {
+ opacity: 0.6;
+ cursor: progress;
+}
+
+.location-error {
+ color: var(--error);
+ font-size: 0.85rem;
+}
+
+.location-source {
+ color: var(--primary);
+ font-size: 0.85rem;
+}
diff --git a/frontend/src/views/SearchView.jsx b/frontend/src/views/SearchView.jsx
new file mode 100644
index 0000000..63f2c7c
--- /dev/null
+++ b/frontend/src/views/SearchView.jsx
@@ -0,0 +1,263 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import SearchBar from '../components/SearchBar';
+import MedicineResults from '../components/MedicineResults';
+import PharmacyList from '../components/PharmacyList';
+import PharmacyMap from '../components/PharmacyMap';
+import { haversineKm, getUserPosition } from '../utils/geo';
+import './SearchView.css';
+
+const suggestions = [
+ { name: 'Paracetamol', icon: 'medication', color: 'primary' },
+ { name: 'Ibuprofeno', icon: 'pill', color: 'secondary' },
+ { name: 'Aspirina', icon: 'vaccines', color: 'tertiary' },
+ { name: 'Omeprazol', icon: 'emergency_home', color: 'tint' },
+];
+
+const recentResults = [
+ { name: 'Amoxicilina', detail: '500mg • 24 Cápsulas', tag: 'Antibiótico', distance: '300m - Farmacia Central' },
+ { name: 'Losartán', detail: '50mg • 30 Comprimidos', tag: 'Hipertensión', distance: '1.2km - Farmacia del Sol' },
+];
+
+function SearchView({ currentUser, onLoginRequest }) {
+ const [searchQuery, setSearchQuery] = useState('');
+ const [medicines, setMedicines] = useState([]);
+ const [selectedMedicine, setSelectedMedicine] = useState(null);
+ const [pharmacies, setPharmacies] = useState([]);
+ const [loading, setLoading] = useState(false);
+ const [userPosition, setUserPosition] = useState(null);
+ const [positionSource, setPositionSource] = useState(null);
+ const [sortByDistance, setSortByDistance] = useState(false);
+ const [locating, setLocating] = useState(false);
+ const [locationError, setLocationError] = useState('');
+
+ useEffect(() => {
+ const searchMedicines = async () => {
+ if (searchQuery.trim().length < 2) {
+ setMedicines([]);
+ setSelectedMedicine(null);
+ setPharmacies([]);
+ return;
+ }
+ setLoading(true);
+ try {
+ const response = await fetch(`/api/medicines/search?q=${encodeURIComponent(searchQuery)}`);
+ const data = await response.json();
+ setMedicines(data);
+ } catch (error) {
+ console.error('Error searching medicines:', error);
+ } finally {
+ setLoading(false);
+ }
+ };
+ const timeoutId = setTimeout(searchMedicines, 300);
+ return () => clearTimeout(timeoutId);
+ }, [searchQuery]);
+
+ useEffect(() => {
+ const fetchPharmacies = async () => {
+ if (!selectedMedicine) {
+ setPharmacies([]);
+ return;
+ }
+ setLoading(true);
+ try {
+ const response = await fetch(`/api/medicines/${selectedMedicine.id}/pharmacies`);
+ const data = await response.json();
+ setPharmacies(data);
+ } catch (error) {
+ console.error('Error fetching pharmacies:', error);
+ } finally {
+ setLoading(false);
+ }
+ };
+ fetchPharmacies();
+ }, [selectedMedicine]);
+
+ const savedLat = currentUser?.latitude;
+ const savedLon = currentUser?.longitude;
+ const hasSavedCoords = savedLat != null && savedLon != null;
+
+ const handleSortByDistance = async () => {
+ if (sortByDistance) {
+ setSortByDistance(false);
+ return;
+ }
+ setLocationError('');
+ if (hasSavedCoords) {
+ setUserPosition({ lat: savedLat, lon: savedLon });
+ setPositionSource('profile');
+ setSortByDistance(true);
+ return;
+ }
+ if (userPosition) {
+ setSortByDistance(true);
+ return;
+ }
+ setLocating(true);
+ try {
+ const pos = await getUserPosition();
+ setUserPosition(pos);
+ setPositionSource('browser');
+ setSortByDistance(true);
+ } catch (err) {
+ let msg = 'No se pudo obtener tu ubicación';
+ if (err && typeof err.code === 'number') {
+ if (err.code === 1) msg = 'Permiso de ubicación denegado';
+ else if (err.code === 2) msg = 'Ubicación no disponible';
+ else if (err.code === 3) msg = 'La solicitud de ubicación expiró';
+ }
+ setLocationError(msg);
+ } finally {
+ setLocating(false);
+ }
+ };
+
+ const displayedPharmacies = useMemo(() => {
+ if (!sortByDistance || !userPosition) return pharmacies;
+ return [...pharmacies].sort((a, b) => {
+ if (a.latitude == null || a.longitude == null) return 1;
+ if (b.latitude == null || b.longitude == null) return -1;
+ return (
+ haversineKm(userPosition.lat, userPosition.lon, a.latitude, a.longitude) -
+ haversineKm(userPosition.lat, userPosition.lon, b.latitude, b.longitude)
+ );
+ });
+ }, [pharmacies, sortByDistance, userPosition]);
+
+ return (
+
+
+
+
+ {loading &&
Buscando...
}
+
+ {!searchQuery && !selectedMedicine && (
+ <>
+
+ Sugerencias
+
+ {suggestions.map((s, i) => (
+
+ ))}
+
+
+
+ Resultados Recientes
+
+ {recentResults.map((r, i) => (
+
+
+
+
{r.name}
+
{r.detail}
+
+
{r.tag}
+
+
+
+
+ ))}
+
+
+ )}
+
+ {searchQuery && !selectedMedicine && (
+
+ )}
+
+ {selectedMedicine && (
+
+
+
{selectedMedicine.name}
+
+ Ingrediente Activo: {selectedMedicine.active_ingredient}
+ Dosis: {selectedMedicine.dosage}
+ Forma: {selectedMedicine.form}
+
+
+
+
+ {pharmacies.length > 0 && (
+
+
+ {sortByDistance && positionSource === 'profile' && (
+ Usando tu dirección guardada
+ )}
+ {locationError && (
+ {locationError}
+ )}
+
+ )}
+
+
+
+
+ )}
+
+
+ );
+}
+
+export default SearchView;
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index 7396420..f513b50 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -20,14 +20,14 @@ export default defineConfig({
name: 'FarmaFinder',
short_name: 'FarmaFinder',
description: 'Find pharmacies that stock the medicine you need',
- theme_color: '#0f766e',
- background_color: '#ffffff',
+ theme_color: '#00450d',
+ background_color: '#f8fafb',
display: 'standalone',
start_url: '/',
icons: [
- { src: '/icon.svg', sizes: '192x192', type: 'image/svg+xml', purpose: 'any' },
- { src: '/icon.svg', sizes: '512x512', type: 'image/svg+xml', purpose: 'any' },
- { src: '/icon-mask.svg', sizes: '512x512', type: 'image/svg+xml', purpose: 'maskable' },
+ { src: '/logo-square-192.png', sizes: '192x192', type: 'image/png', purpose: 'any' },
+ { src: '/logo-square-512.png', sizes: '512x512', type: 'image/png', purpose: 'any' },
+ { src: '/logo.png', sizes: '512x279', type: 'image/png', purpose: 'any' },
],
},
}),
diff --git a/package-lock.json b/package-lock.json
index 71fdb62..4de8ecb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -35,7 +35,6 @@
"url": "https://opencollective.com/capawesome"
}
],
- "license": "Apache-2.0",
"peerDependencies": {
"@capacitor/core": ">=8.0.0"
}