Revamp pricing tiers form UI and validation

Improves the pricing tiers form with enhanced UI using Card and Label components, adds help text, and introduces validation for quantity, price, and duplicate tiers. The form now displays errors inline and sorts tiers by quantity for better usability.

components/forms/pricing-tiers.tsx

@@ -2,7 +2,10 @@
 
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Trash, PlusCircle } from "lucide-react";
+import { Label } from "@/components/ui/label";
+import { Card, CardContent } from "@/components/ui/card";
+import { Trash, PlusCircle, Info } from "lucide-react";
+import { useState } from "react";
 
 interface PricingTiersProps {
   pricing: any[];
@@ -20,112 +23,171 @@ export const PricingTiers = ({
   handleRemoveTier, 
   handleAddTier,
 }: PricingTiersProps) => {
+  const [showHelp, setShowHelp] = useState(false);
+
   const formatNumber = (num: number) => {
-    // Only format to 2 decimal places if the number has decimal places
+    if (num === 0) return "";
-    // This prevents cursor jumping when user types whole numbers
     return num % 1 === 0 ? num.toString() : num.toFixed(2);
   };
 
-  const formatTotal = (num: number) => {
-    return num.toFixed(2);
-  };
-
   const calculateTotal = (quantity: number, pricePerUnit: number) => {
-    return formatTotal(quantity * pricePerUnit);
+    return (quantity * pricePerUnit).toFixed(2);
   };
 
-  const handleTotalChange = (
+  const validateTier = (tier: any, index: number) => {
-    e: React.ChangeEvent<HTMLInputElement>,
+    const errors = [];
-    index: number,
-    minQuantity: number
-  ) => {
-    const totalPrice = Number(e.target.value);
-    const pricePerUnit = minQuantity > 0 ? totalPrice / minQuantity : 0;
     
-    const syntheticEvent = {
+    if (tier.minQuantity <= 0) {
-      target: {
+      errors.push("Quantity must be greater than 0");
-        name: 'pricePerUnit',
-        value: formatNumber(pricePerUnit)
     }
-    } as React.ChangeEvent<HTMLInputElement>;
     
-    handleTierChange(syntheticEvent, index);
+    if (tier.pricePerUnit <= 0) {
-  };
+      errors.push("Price must be greater than 0");
+    }
     
-  return (
+    // Check for duplicate quantities
-    <div>
+    const duplicateIndex = pricing.findIndex((p, i) => 
-      <h3 className="text-sm font-medium">Tiered Pricing</h3>
+      i !== index && p.minQuantity === tier.minQuantity
-
-      {pricing?.length > 0 ? (
-        <>
-          <div className="grid grid-cols-[1fr_1fr_1fr_auto] gap-2 mt-2 mb-1">
-            <div className="text-xs text-muted-foreground">Quantity</div>
-            <div className="text-xs text-muted-foreground">Price Per Unit</div>
-            <div className="text-xs text-muted-foreground">Total Price</div>
-            <div className="w-8" />
-          </div>
-
-          {[...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 || originalIndex}
-              className="grid grid-cols-[1fr_1fr_1fr_auto] gap-2 mt-2"
-            >
-              <Input
-                name="minQuantity"
-                type="number"
-                placeholder="Min Quantity"
-                value={tier.minQuantity === 0 ? "" : tier.minQuantity}
-                onChange={(e) => handleTierChange(e, originalIndex)}
-                className="h-8 text-sm px-2"
-              />
     
-              <Input
+    if (duplicateIndex !== -1) {
-                name="pricePerUnit"
+      errors.push("Duplicate quantity found");
-                type="number"
-                placeholder="Price per unit"
-                value={tier.pricePerUnit === 0 ? "" : formatNumber(tier.pricePerUnit)}
-                onChange={(e) => handleTierChange(e, originalIndex)}
-                className="h-8 text-sm px-2"
-              />
-
-              <Input
-                type="number"
-                placeholder="Total price"
-                value={
-                  tier.minQuantity && tier.pricePerUnit
-                    ? calculateTotal(tier.minQuantity, tier.pricePerUnit)
-                    : ""
     }
-                onChange={(e) => handleTotalChange(e, originalIndex, tier.minQuantity)}
-                className="h-8 text-sm px-2"
-              />
     
+    return errors;
+  };
+
+  const sortedPricing = [...pricing].sort((a, b) => a.minQuantity - b.minQuantity);
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <h3 className="text-sm font-medium">Pricing Tiers</h3>
         <Button
           variant="ghost"
-                size="icon"
+          size="sm"
-                className="text-red-500 hover:bg-red-100"
+          onClick={() => setShowHelp(!showHelp)}
-                onClick={() => handleRemoveTier(originalIndex)}
+          className="text-xs text-muted-foreground"
         >
-                <Trash className="h-5 w-5" />
+          <Info className="w-3 h-3 mr-1" />
+          {showHelp ? "Hide" : "Help"}
         </Button>
       </div>
-            );
+
-          })}
+      {showHelp && (
-        </>
+        <Card className="bg-blue-50 border-blue-200">
-      ) : (
+          <CardContent className="p-3">
-        <p className="text-sm text-gray-500 mt-2">No pricing tiers added.</p>
+            <p className="text-xs text-blue-800">
+              <strong>How it works:</strong> Set different prices based on quantity. 
+              For example: 1-10 units at £5 each, 11-50 units at £4 each, 51+ units at £3 each.
+              Quantities should be in ascending order.
+            </p>
+          </CardContent>
+        </Card>
       )}
 
-      <Button variant="outline" size="sm" className="mt-2" onClick={handleAddTier}>
+      {pricing?.length > 0 ? (
-        <PlusCircle className="w-4 h-4 mr-1" />
+        <div className="space-y-3">
-        Add Tier
+          {sortedPricing.map((tier, sortedIndex) => {
+            const originalIndex = pricing.findIndex(p => p === tier);
+            const errors = validateTier(tier, originalIndex);
+            const total = tier.minQuantity && tier.pricePerUnit 
+              ? calculateTotal(tier.minQuantity, tier.pricePerUnit)
+              : "0.00";
+
+            return (
+              <Card key={tier._id || originalIndex} className={`p-4 ${errors.length > 0 ? 'border-red-200 bg-red-50' : 'border-gray-200'}`}>
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                  <div className="space-y-2">
+                    <Label htmlFor={`quantity-${originalIndex}`} className="text-xs font-medium">
+                      Minimum Quantity *
+                    </Label>
+                    <Input
+                      id={`quantity-${originalIndex}`}
+                      name="minQuantity"
+                      type="number"
+                      min="1"
+                      step="1"
+                      placeholder="e.g. 10"
+                      value={tier.minQuantity === 0 ? "" : tier.minQuantity}
+                      onChange={(e) => handleTierChange(e, originalIndex)}
+                      className={`h-10 ${errors.some(e => e.includes('Quantity')) ? 'border-red-500' : ''}`}
+                    />
+                    {errors.some(e => e.includes('Quantity')) && (
+                      <p className="text-xs text-red-600">{errors.find(e => e.includes('Quantity'))}</p>
+                    )}
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label htmlFor={`price-${originalIndex}`} className="text-xs font-medium">
+                      Price Per Unit (£) *
+                    </Label>
+                    <Input
+                      id={`price-${originalIndex}`}
+                      name="pricePerUnit"
+                      type="number"
+                      min="0"
+                      step="0.01"
+                      placeholder="e.g. 5.00"
+                      value={tier.pricePerUnit === 0 ? "" : formatNumber(tier.pricePerUnit)}
+                      onChange={(e) => handleTierChange(e, originalIndex)}
+                      className={`h-10 ${errors.some(e => e.includes('Price')) ? 'border-red-500' : ''}`}
+                    />
+                    {errors.some(e => e.includes('Price')) && (
+                      <p className="text-xs text-red-600">{errors.find(e => e.includes('Price'))}</p>
+                    )}
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label className="text-xs font-medium text-muted-foreground">
+                      Total Price
+                    </Label>
+                    <div className="h-10 px-3 py-2 bg-gray-50 border border-gray-200 rounded-md flex items-center">
+                      <span className="text-sm font-medium">£{total}</span>
+                    </div>
+                    <p className="text-xs text-muted-foreground">
+                      {tier.minQuantity} × £{formatNumber(tier.pricePerUnit)}
+                    </p>
+                  </div>
+                </div>
+
+                {errors.some(e => e.includes('Duplicate')) && (
+                  <p className="text-xs text-red-600 mt-2">
+                    ⚠️ This quantity is already used in another tier
+                  </p>
+                )}
+
+                <div className="flex justify-end mt-3">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => handleRemoveTier(originalIndex)}
+                    className="text-red-600 hover:text-red-700 hover:bg-red-100"
+                  >
+                    <Trash className="w-4 h-4 mr-1" />
+                    Remove
+                  </Button>
+                </div>
+              </Card>
+            );
+          })}
+        </div>
+      ) : (
+        <Card className="border-dashed border-2 border-gray-300">
+          <CardContent className="p-6 text-center">
+            <p className="text-sm text-gray-500 mb-2">No pricing tiers added yet</p>
+            <p className="text-xs text-gray-400">Add your first tier to get started</p>
+          </CardContent>
+        </Card>
+      )}
+
+      <Button 
+        variant="outline" 
+        onClick={handleAddTier}
+        className="w-full"
+      >
+        <PlusCircle className="w-4 h-4 mr-2" />
+        Add Pricing Tier
       </Button>
     </div>
   );