Fix

app/dashboard/products/page.tsx

@@ -27,8 +27,8 @@ export default function ProductsPage() {
     description: "",
     unitType: "pcs",
     category: "",
-    tieredPricing: [{ minQuantity: 1, pricePerUnit: 0 }],
-    image: null,
+    pricing: [{ minQuantity: 1, pricePerUnit: 0 }],
+    image: null
   });
 
   // Fetch products and categories
@@ -61,7 +61,7 @@ export default function ProductsPage() {
         // Ensure all products have tieredPricing
         const processedProducts = fetchedProducts.map((product: Product) => ({
           ...product,
-          tieredPricing: product.tieredPricing || [{ minQuantity: 1, pricePerUnit: 0 }],
+          pricing: product.pricing || [{ minQuantity: 1, pricePerUnit: 0 }],
         }));
     
         setProducts(processedProducts);
@@ -85,26 +85,26 @@ export default function ProductsPage() {
     e: ChangeEvent<HTMLInputElement>,
     index: number
   ) => {
-    const updatedPricing = [...productData.tieredPricing];
+    const updatedPricing = [...productData.pricing];
     const name = e.target.name as "minQuantity" | "pricePerUnit";
     updatedPricing[index][name] = e.target.valueAsNumber || 0;
-    setProductData({ ...productData, tieredPricing: updatedPricing });
+    setProductData({ ...productData, pricing: updatedPricing });
   };
 
   // Save product data after modal form submission
   const handleSaveProduct = async (data: Product) => {
-    const adjustedPricing = data.tieredPricing.map((tier) => ({
+    const adjustedPricing = data.pricing.map((tier) => ({
       minQuantity: tier.minQuantity,
       pricePerUnit:
         typeof tier.pricePerUnit === "string"
-          ? parseFloat(tier.pricePerUnit) // Convert string to number
+          ? parseFloat(tier.pricePerUnit)
           : tier.pricePerUnit,
     }));
   
-    const productToSave = {
+    const productToSave: Product = {
       ...data,
       pricing: adjustedPricing,
-      imageBase64: imagePreview || "",
+      image: data.image ?? "", // ✅ Prevents undefined error
     };
   
     try {
@@ -130,7 +130,7 @@ export default function ProductsPage() {
         }
       });
   
-      setModalOpen(false); // Close modal after saving
+      setModalOpen(false);
     } catch (error) {
       console.error("Error saving product:", error);
     }
@@ -158,8 +158,8 @@ export default function ProductsPage() {
   const handleEditProduct = (product: Product) => {
     setProductData({
       ...product,
-      tieredPricing: product.tieredPricing
-        ? product.tieredPricing.map(tier => ({
+      pricing: product.pricing
+        ? product.pricing.map(tier => ({
             minQuantity: tier.minQuantity,
             pricePerUnit: tier.pricePerUnit
           }))
@@ -176,7 +176,7 @@ export default function ProductsPage() {
       description: "",
       unitType: "pcs",
       category: "",
-      tieredPricing: [{ minQuantity: 1, pricePerUnit: 0 }],
+      pricing: [{ minQuantity: 1, pricePerUnit: 0 }],
       image: null,
     });
     setEditing(false);

components/modals/product-modal.tsx

@@ -18,9 +18,9 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Product } from "@/models/products";
 import { Trash, PlusCircle } from "lucide-react";
 import { toast } from "sonner";
+import { Product } from "@/models/products";
 
 interface Category {
   _id: string;
@@ -39,7 +39,7 @@ interface ProductData {
   unitType: string;
   category: string;
   pricing: PricingTier[];
-  image: string | File | null;
+  image?: string | File | null | undefined; 
 }
 
 interface ProductModalProps {
@@ -47,11 +47,10 @@ interface ProductModalProps {
   onClose: () => void;
   onSave: (productData: ProductData) => void;
   productData: ProductData;
-  categories: Category[];
+  categories: any[];
   editing: boolean;
-  handleChange: (
-    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-  ) => void;
+  handleChange: (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+  handleTieredPricingChange: (e: ChangeEvent<HTMLInputElement>, index: number) => void; // ✅ Added this
   setProductData: React.Dispatch<React.SetStateAction<ProductData>>;
 }
 
@@ -72,15 +71,6 @@ export const ProductModal = ({
     height: 200,
   });
 
-  useEffect(() => {
-    if (productData?.pricing) {
-      setProductData((prev) => ({
-        ...prev,
-        tieredPricing: productData.pricing,
-      }));
-    }
-  }, [productData.pricing]);
-
   useEffect(() => {
     if (productData.image && typeof productData.image === "string") {
       setImagePreview(productData.image);
@@ -137,13 +127,19 @@ export const ProductModal = ({
 
     updatedPricing[index] = {
       ...updatedPricing[index],
-      [name]: isNaN(valueAsNumber) ? 0 : valueAsNumber, // Ensure valid numbers
+      [name]: isNaN(valueAsNumber) ? 0 : valueAsNumber, 
     };
 
     setProductData((prev) => ({
       ...prev,
       tieredPricing: updatedPricing,
+      image: prev.image ?? null,
     }));
+
+    const convertToProductData = (product: Product): ProductData => ({
+      ...product,
+      image: product.image ?? null, // ✅ Ensures the type is correct
+    });
   };
 
   return (

models/products.ts

@@ -4,9 +4,9 @@ export interface Product {
   description: string;
   unitType: string;
   category: string;
-  tieredPricing: Array<{
+  pricing: Array<{
     minQuantity: number;
     pricePerUnit: number;
   }>;
-  image?: string | File | null;
+  image?: string | File | null | undefined;
 }