From 2452a3c5f65b7eca8a588bfe302044623f42a605 Mon Sep 17 00:00:00 2001
From: NotII <46204250+NotII@users.noreply.github.com>
Date: Sun, 27 Jul 2025 00:24:57 +0200
Subject: [PATCH] Sort pricing tiers by minQuantity in UI

Pricing tiers are now displayed sorted by minQuantity, improving clarity for users. Event handlers are updated to use the original index to ensure correct tier manipulation after sorting.
---
 components/forms/pricing-tiers.tsx | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/components/forms/pricing-tiers.tsx b/components/forms/pricing-tiers.tsx
index 57c1d38..68df3f0 100644
--- a/components/forms/pricing-tiers.tsx
+++ b/components/forms/pricing-tiers.tsx
@@ -63,9 +63,16 @@ export const PricingTiers = ({
             <div className="w-8" />
           </div>
 
-          {pricing.map((tier, index) => (
+          {[...pricing]
+            .sort((a, b) => a.minQuantity - b.minQuantity)
+            .map((tier, sortedIndex) => {
+              // Find the original index for proper event handling
+              const originalIndex = pricing.findIndex(p => 
+                p === tier || (p.minQuantity === tier.minQuantity && p.pricePerUnit === tier.pricePerUnit)
+              );
+              return (
             <div
-              key={tier._id || index}
+              key={tier._id || originalIndex}
               className="grid grid-cols-[1fr_1fr_1fr_auto] gap-2 mt-2"
             >
               <Input
@@ -73,7 +80,7 @@ export const PricingTiers = ({
                 type="number"
                 placeholder="Min Quantity"
                 value={tier.minQuantity === 0 ? "" : tier.minQuantity}
-                onChange={(e) => handleTierChange(e, index)}
+                onChange={(e) => handleTierChange(e, originalIndex)}
                 className="h-8 text-sm px-2"
               />
 
@@ -82,7 +89,7 @@ export const PricingTiers = ({
                 type="number"
                 placeholder="Price per unit"
                 value={tier.pricePerUnit === 0 ? "" : formatNumber(tier.pricePerUnit)}
-                onChange={(e) => handleTierChange(e, index)}
+                onChange={(e) => handleTierChange(e, originalIndex)}
                 className="h-8 text-sm px-2"
               />
 
@@ -94,7 +101,7 @@ export const PricingTiers = ({
                     ? calculateTotal(tier.minQuantity, tier.pricePerUnit)
                     : ""
                 }
-                onChange={(e) => handleTotalChange(e, index, tier.minQuantity)}
+                onChange={(e) => handleTotalChange(e, originalIndex, tier.minQuantity)}
                 className="h-8 text-sm px-2"
               />
 
@@ -102,12 +109,13 @@ export const PricingTiers = ({
                 variant="ghost"
                 size="icon"
                 className="text-red-500 hover:bg-red-100"
-                onClick={() => handleRemoveTier(index)}
+                onClick={() => handleRemoveTier(originalIndex)}
               >
                 <Trash className="h-5 w-5" />
               </Button>
             </div>
-          ))}
+            );
+          })}
         </>
       ) : (
         <p className="text-sm text-gray-500 mt-2">No pricing tiers added.</p>