From 55065eafe3edb7a15ea95be954961411d722ee37 Mon Sep 17 00:00:00 2001
From: Hardik <shardik99@gmail.com>
Date: Sat, 16 May 2026 02:29:14 +0530
Subject: [PATCH] feat(items): show Cheapest and Closest tags independent of
 sort order
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Previously tags were tied to the active sort (only Closest showed when
sorting by distance, only Cheapest when sorting by price). Now both are
computed independently — Cheapest = vendor with min price, Closest =
vendor with min distanceKm — and shown simultaneously when a site is
selected, regardless of which sort is active.

Verified with Playwright: both tags present under distance sort, price
sort, and absent when no site is selected.
---
 .../app/(portal)/inventory/items/items-table.tsx  | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/App/pelagia-portal/app/(portal)/inventory/items/items-table.tsx b/App/pelagia-portal/app/(portal)/inventory/items/items-table.tsx
index 9536c6e..7c8a670 100644
--- a/App/pelagia-portal/app/(portal)/inventory/items/items-table.tsx
+++ b/App/pelagia-portal/app/(portal)/inventory/items/items-table.tsx
@@ -193,6 +193,12 @@ export function ItemsTable({
               const lowestPrice = item.vendors.length > 0 ? Math.min(...item.vendors.map((v) => v.price)) : null;
               const sortedVendors = getSortedVendors(item.vendors);
 
+              // Cheapest and closest are independent of current sort order
+              const minPrice = sortedVendors.length > 1 ? Math.min(...sortedVendors.map((v) => v.price)) : null;
+              const closestVendorId = hasSite
+                ? (sortedVendors.filter((v) => v.distanceKm !== null).sort((a, b) => a.distanceKm! - b.distanceKm!)[0]?.vendorId ?? null)
+                : null;
+
               return (
                 <Fragment key={item.id}>
                   {/* Item row */}
@@ -239,9 +245,10 @@ export function ItemsTable({
                               </tr>
                             </thead>
                             <tbody className="divide-y divide-neutral-100">
-                              {sortedVendors.map((vendor, idx) => {
+                              {sortedVendors.map((vendor) => {
                                 const key = `${item.id}-${vendor.vendorId}`;
-                                const isFirst = idx === 0;
+                                const isCheapest = minPrice !== null && vendor.price === minPrice;
+                                const isClosest = closestVendorId !== null && vendor.vendorId === closestVendorId;
                                 return (
                                   <tr key={vendor.vendorId} className="hover:bg-white">
                                     <td className="px-12 py-2.5">
@@ -256,10 +263,10 @@ export function ItemsTable({
                                         {vendor.isVerified && (
                                           <span className="rounded-full bg-success-100 px-1.5 py-0.5 text-xs font-medium text-success-700">Verified</span>
                                         )}
-                                        {isFirst && sortBy === "distance" && vendor.distanceKm !== null && (
+                                        {isClosest && (
                                           <span className="text-xs text-primary-600 font-medium">★ Closest</span>
                                         )}
-                                        {isFirst && sortBy === "price" && (
+                                        {isCheapest && (
                                           <span className="text-xs text-success-600 font-medium">Cheapest</span>
                                         )}
                                       </div>