Cleanup

components/forms/image-upload.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { ChangeEvent } from "react";
+import { Input } from "@/components/ui/input";
+
+interface ImageUploadProps {
+  imagePreview: string | null;
+  handleImageChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  imageDimensions: { width: number; height: number };
+}
+
+export const ImageUpload = ({
+  imagePreview,
+  handleImageChange,
+  imageDimensions,
+}: ImageUploadProps) => (
+  <div>
+    <label className="text-sm font-medium">Product Image</label>
+    <div 
+      className="relative border rounded-md flex items-center justify-center bg-gray-50 dark:bg-gray-800 w-full h-48"
+      style={{ width: imageDimensions.width, height: imageDimensions.height }}
+    >
+      {imagePreview ? (
+        <img
+          src={imagePreview}
+          alt="Preview"
+          className="object-contain w-full h-full rounded-md"
+        />
+      ) : (
+        <span className="text-gray-400 text-sm">No Image Selected</span>
+      )}
+    </div>
+    <Input
+      type="file"
+      accept="image/*"
+      onChange={handleImageChange}
+      className="mt-2 h-9 text-sm"
+    />
+  </div>
+);

components/forms/pricing-tiers.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Trash, PlusCircle } from "lucide-react";
+
+interface PricingTiersProps {
+  pricing: any[];
+  handleTierChange: (e: React.ChangeEvent<HTMLInputElement>, index: number) => void;
+  handleRemoveTier: (index: number) => void;
+  handleAddTier: () => void;
+}
+
+export const PricingTiers = ({
+  pricing,
+  handleTierChange,
+  handleRemoveTier,
+  handleAddTier,
+}: PricingTiersProps) => (
+  <div>
+    <h3 className="text-sm font-medium">Tiered Pricing</h3>
+
+    {pricing?.length > 0 ? (
+      pricing.map((tier, index) => (
+        <div key={tier._id || index} className="flex items-center gap-2 mt-2">
+          <Input
+            name="minQuantity"
+            type="number"
+            min="1"
+            placeholder="Min Quantity"
+            value={tier.minQuantity}
+            onChange={(e) => handleTierChange(e, index)}
+            className="h-8 text-sm px-2 flex-1"
+          />
+          <Input
+            name="pricePerUnit"
+            type="number"
+            placeholder="Price per unit"
+            value={tier.pricePerUnit}
+            onChange={(e) => handleTierChange(e, index)}
+            className="h-8 text-sm px-2 flex-1"
+          />
+          <Button
+            variant="ghost"
+            size="icon"
+            className="text-red-500 hover:bg-red-100"
+            onClick={() => handleRemoveTier(index)}
+          >
+            <Trash className="h-5 w-5" />
+          </Button>
+        </div>
+      ))
+    ) : (
+      <p className="text-sm text-gray-500 mt-2">No pricing tiers added.</p>
+    )}
+
+    <Button
+      variant="outline"
+      size="sm"
+      className="mt-2"
+      onClick={handleAddTier}
+    >
+      <PlusCircle className="w-4 h-4 mr-1" />
+      Add Tier
+    </Button>
+  </div>
+);