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

@@ -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>