From 570d4ab43e8838ebd8f2f516df5110c2d73fdc27 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Antoni=20Nu=C3=B1ez=20Romeu?= <antoni.nunez@ficosa.com>
Date: Thu, 16 Jul 2026 15:36:08 +0200
Subject: [PATCH] feat: unified search - remove filter tabs, show all results
 together

- Frontend now searches both CIMA and Parapharmacy simultaneously
- Removed filter tabs (Todos/Medicamentos/Parafarmacia)
- Results show in a single unified list
- Mobile: Shows medicines first, then parapharmacy section
- Web: Same unified approach with results summary
---
 apps/frontend-mobile/app/(tabs)/search.tsx | 57 ++++++-------------
 apps/frontend/src/views/SearchView.jsx     | 66 +++++++---------------
 2 files changed, 36 insertions(+), 87 deletions(-)

diff --git a/apps/frontend-mobile/app/(tabs)/search.tsx b/apps/frontend-mobile/app/(tabs)/search.tsx
index 8ce000b..1b95b2c 100644
--- a/apps/frontend-mobile/app/(tabs)/search.tsx
+++ b/apps/frontend-mobile/app/(tabs)/search.tsx
@@ -33,7 +33,6 @@ export default function SearchScreen() {
   const [query, setQuery] = useState('');
   const [results, setResults] = useState<Medicine[]>([]);
   const [products, setProducts] = useState<Product[]>([]);
-  const [searchMode, setSearchMode] = useState<'all' | 'medicines' | 'products'>('all');
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -104,17 +103,11 @@ export default function SearchScreen() {
         onChangeText={setQuery}
       />
 
-      {query.length >= 2 && (
-        <View style={styles.filterContainer}>
-          <TouchableOpacity style={[styles.filterTab, searchMode === 'all' && styles.filterTabActive]} onPress={() => setSearchMode('all')}>
-            <Text style={[styles.filterText, searchMode === 'all' && styles.filterTextActive]}>Todos</Text>
-          </TouchableOpacity>
-          <TouchableOpacity style={[styles.filterTab, searchMode === 'medicines' && styles.filterTabActive]} onPress={() => setSearchMode('medicines')}>
-            <Text style={[styles.filterText, searchMode === 'medicines' && styles.filterTextActive]}>Medicamentos</Text>
-          </TouchableOpacity>
-          <TouchableOpacity style={[styles.filterTab, searchMode === 'products' && styles.filterTabActive]} onPress={() => setSearchMode('products')}>
-            <Text style={[styles.filterText, searchMode === 'products' && styles.filterTextActive]}>Parafarmacia</Text>
-          </TouchableOpacity>
+      {query.length >= 2 && (results.length + products.length) > 0 && (
+        <View style={styles.resultsSummary}>
+          <Text style={[styles.resultsSummaryText, { color: colors.textSecondary }]}>
+            {results.length + products.length} resultados encontrados
+          </Text>
         </View>
       )}
 
@@ -176,29 +169,29 @@ export default function SearchScreen() {
       )}
 
       <FlatList
-        data={(searchMode === 'medicines' || searchMode === 'all') ? results : []}
+        data={results}
         keyExtractor={(item) => item.nregistro}
         renderItem={({ item }) => <MedicineCard medicine={item} />}
         ListHeaderComponent={
           <>
-            {(searchMode === 'all' || searchMode === 'products') && products.length > 0 && (
+            {products.length > 0 && (
               <View style={styles.section}>
-                <Text style={[styles.sectionTitle, { color: colors.text }]}>Parafarmacia y Bebé</Text>
+                <Text style={[styles.sectionTitle, { color: colors.text }]}>Parafarmacia</Text>
                 {products.map((product) => (
                   <TouchableOpacity
-                    key={`${product.source}-${product.id}`}
+                    key={`${product.source}-${product.id || product._id}`}
                     style={[styles.productCard, { backgroundColor: colors.card, borderColor: colors.border }]}
-                    onPress={() => router.push(`/product/${product.source}/${product.id}`)}
+                    onPress={() => router.push(`/product/${product.source}/${product.id || product._id}`)}
                     activeOpacity={0.7}
                   >
                     <View style={styles.productInfo}>
                       <View style={styles.badges}>
-                        <View style={[styles.sourceBadge, { backgroundColor: product.source === 'cima' ? '#2563eb' : '#16a34a' }]}>
-                          <Text style={styles.badgeText}>{product.source === 'cima' ? 'CIMA' : 'OFF'}</Text>
+                        <View style={[styles.sourceBadge, { backgroundColor: '#16a34a' }]}>
+                          <Text style={styles.badgeText}>Parafarmacia</Text>
                         </View>
                       </View>
                       <Text style={[styles.productName, { color: colors.text }]} numberOfLines={1}>{product.name}</Text>
-                      <Text style={[styles.productBrand, { color: colors.textSecondary }]} numberOfLines={1}>{product.brand}</Text>
+                      <Text style={[styles.productBrand, { color: colors.textSecondary }]} numberOfLines={1}>{product.brand} • {product.price}€</Text>
                     </View>
                   </TouchableOpacity>
                 ))}
@@ -217,29 +210,13 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
-  filterContainer: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    gap: spacing.sm,
+  resultsSummary: {
+    paddingHorizontal: spacing.lg,
     paddingVertical: spacing.sm,
-    paddingHorizontal: spacing.md,
   },
-  filterTab: {
-    paddingHorizontal: spacing.md,
-    paddingVertical: spacing.sm,
-    borderRadius: borderRadius.full,
-    backgroundColor: 'rgba(0,0,0,0.05)',
-  },
-  filterTabActive: {
-    backgroundColor: '#7fbf8f',
-  },
-  filterText: {
+  resultsSummaryText: {
     fontSize: 14,
-    fontWeight: '600',
-    color: '#41493e',
-  },
-  filterTextActive: {
-    color: '#ffffff',
+    fontWeight: '500',
   },
   section: {
     paddingHorizontal: spacing.lg,
diff --git a/apps/frontend/src/views/SearchView.jsx b/apps/frontend/src/views/SearchView.jsx
index d711f51..f03e79d 100644
--- a/apps/frontend/src/views/SearchView.jsx
+++ b/apps/frontend/src/views/SearchView.jsx
@@ -18,7 +18,6 @@ function SearchView({ currentUser, onLoginRequest, initialQuery = '', onNavigate
   const [searchQuery, setSearchQuery] = useState(initialQuery);
   const [medicines, setMedicines] = useState([]);
   const [products, setProducts] = useState([]);
-  const [searchMode, setSearchMode] = useState('all');
   const [selectedMedicine, setSelectedMedicine] = useState(null);
   const [pharmacies, setPharmacies] = useState([]);
   const [loading, setLoading] = useState(false);
@@ -88,16 +87,24 @@ function SearchView({ currentUser, onLoginRequest, initialQuery = '', onNavigate
       const query = searchQuery.trim();
 
       try {
-        // Only search medications from CIMA
-        const medicinesRes = await fetch(`/api/medicines/search?q=${encodeURIComponent(query)}`);
+        // Search both CIMA and Parapharmacy simultaneously
+        const [medicinesRes, productsRes] = await Promise.allSettled([
+          fetch(`/api/medicines/search?q=${encodeURIComponent(query)}`),
+          fetch(`/api/products/parapharmacy/search?q=${encodeURIComponent(query)}`)
+        ]);
 
         // Only update if this search is still the current one
         if (query !== searchQuery.trim()) return;
 
-        if (medicinesRes.ok) {
-          const medicinesData = await medicinesRes.json();
+        if (medicinesRes.status === 'fulfilled' && medicinesRes.value.ok) {
+          const medicinesData = await medicinesRes.value.json();
           setMedicines(medicinesData);
         }
+
+        if (productsRes.status === 'fulfilled' && productsRes.value.ok) {
+          const productsData = await productsRes.value.json();
+          setProducts(productsData.results || []);
+        }
       } catch (error) {
         console.error('Search error:', error);
       } finally {
@@ -108,26 +115,6 @@ function SearchView({ currentUser, onLoginRequest, initialQuery = '', onNavigate
     return () => clearTimeout(timeoutId);
   }, [searchQuery]);
 
-  // Search parapharmacy when user switches to Parafarmacia tab
-  useEffect(() => {
-    if (searchMode !== 'products' || searchQuery.trim().length < 2) return;
-
-    const searchProducts = async () => {
-      const query = searchQuery.trim();
-      try {
-        const response = await fetch(`/api/products/parapharmacy/search?q=${encodeURIComponent(query)}`);
-        if (response.ok) {
-          const data = await response.json();
-          setProducts(data.results || []);
-        }
-      } catch (error) {
-        console.error('Parapharmacy search error:', error);
-      }
-    };
-
-    searchProducts();
-  }, [searchMode, searchQuery]);
-
   useEffect(() => {
     const fetchPharmacies = async () => {
       if (!selectedMedicine) {
@@ -310,28 +297,13 @@ function SearchView({ currentUser, onLoginRequest, initialQuery = '', onNavigate
 
         {searchQuery && !selectedMedicine && (
           <>
-            <div className="filter-tabs">
-              <button
-                className={`filter-tab ${searchMode === 'all' ? 'filter-tab--active' : ''}`}
-                onClick={() => setSearchMode('all')}
-              >
-                Todos ({medicines.length + products.length})
-              </button>
-              <button
-                className={`filter-tab ${searchMode === 'medicines' ? 'filter-tab--active' : ''}`}
-                onClick={() => setSearchMode('medicines')}
-              >
-                Medicamentos ({medicines.length})
-              </button>
-              <button
-                className={`filter-tab ${searchMode === 'products' ? 'filter-tab--active' : ''}`}
-                onClick={() => setSearchMode('products')}
-              >
-                Parafarmacia ({products.length})
-              </button>
+            <div className="results-summary">
+              {(medicines.length + products.length) > 0 && (
+                <span>{medicines.length + products.length} resultados encontrados</span>
+              )}
             </div>
 
-            {(searchMode === 'all' || searchMode === 'medicines') && (
+            {medicines.length > 0 && (
               <MedicineResults
                 medicines={medicines}
                 onSelect={(m) => {
@@ -344,9 +316,9 @@ function SearchView({ currentUser, onLoginRequest, initialQuery = '', onNavigate
               />
             )}
 
-            {(searchMode === 'all' || searchMode === 'products') && products.length > 0 && (
+            {products.length > 0 && (
               <div className="products-section">
-                <h3 className="section-subtitle">Parafarmacia y Bebé</h3>
+                <h3 className="section-subtitle">Parafarmacia</h3>
                 <ProductResults
                   products={products}
                   onSelect={(p) => {