From 299001d8bcdd9019853f5a64a3043ac570d3b0db Mon Sep 17 00:00:00 2001
From: Tiago Yamamoto <tiago.ribeiro@inventcloud.com.br>
Date: Tue, 23 Dec 2025 16:19:47 -0300
Subject: [PATCH] feat(marketplace): add functional sort dropdown to
 ProductSearch

- Add sortBy state with options: price, distance, expiry
- Replace static text with interactive select dropdown
- Implement sorting logic for each option in groupedProducts memo
---
 marketplace/src/pages/ProductSearch.tsx | 39 +++++++++++++++++++++----
 1 file changed, 34 insertions(+), 5 deletions(-)

diff --git a/marketplace/src/pages/ProductSearch.tsx b/marketplace/src/pages/ProductSearch.tsx
index 71736b3..d1a6217 100644
--- a/marketplace/src/pages/ProductSearch.tsx
+++ b/marketplace/src/pages/ProductSearch.tsx
@@ -22,6 +22,7 @@ const ProductSearch = () => {
     const [maxPrice, setMaxPrice] = useState<number | ''>('')
     const [minExpiryDays, setMinExpiryDays] = useState<number>(0)
     const [showAdvancedFilters, setShowAdvancedFilters] = useState(false)
+    const [sortBy, setSortBy] = useState<'price' | 'distance' | 'expiry'>('price')
 
     // Modal state
     const [selectedGroup, setSelectedGroup] = useState<GroupedProduct | null>(null)
@@ -89,9 +90,28 @@ const ProductSearch = () => {
             }
         }
 
-        // Sort by min price
-        return Object.values(groups).sort((a, b) => a.minPriceCents - b.minPriceCents)
-    }, [products, user?.id])
+        // Sort based on selected option
+        const groupsArray = Object.values(groups)
+
+        switch (sortBy) {
+            case 'price':
+                return groupsArray.sort((a, b) => a.minPriceCents - b.minPriceCents)
+            case 'distance':
+                return groupsArray.sort((a, b) => {
+                    const minDistA = Math.min(...a.offers.map(o => o.distance_km))
+                    const minDistB = Math.min(...b.offers.map(o => o.distance_km))
+                    return minDistA - minDistB
+                })
+            case 'expiry':
+                return groupsArray.sort((a, b) => {
+                    const minExpiryA = Math.min(...a.offers.map(o => new Date(o.expires_at).getTime()))
+                    const minExpiryB = Math.min(...b.offers.map(o => new Date(o.expires_at).getTime()))
+                    return minExpiryA - minExpiryB
+                })
+            default:
+                return groupsArray
+        }
+    }, [products, user?.id, sortBy])
 
     const handleLocationSelect = (newLat: number, newLng: number) => {
         setLat(newLat)
@@ -237,8 +257,17 @@ const ProductSearch = () => {
                             <h2 className="text-xl font-semibold text-gray-700">
                                 {loading ? 'Buscando...' : `${groupedProducts.length} medicamentos (${total} ofertas)`}
                             </h2>
-                            <div className="text-sm text-gray-500">
-                                Ordenado por: <span className="font-medium text-gray-800">Menor preço</span>
+                            <div className="flex items-center gap-2 text-sm">
+                                <span className="text-gray-500">Ordenar por:</span>
+                                <select
+                                    value={sortBy}
+                                    onChange={(e) => setSortBy(e.target.value as 'price' | 'distance' | 'expiry')}
+                                    className="rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary text-sm p-1.5 border bg-white cursor-pointer"
+                                >
+                                    <option value="price">Menor preço</option>
+                                    <option value="distance">Mais próximo</option>
+                                    <option value="expiry">Vencimento (mais próximo)</option>
+                                </select>
                             </div>
                         </div>