Refactor

app/dashboard/products/page.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useEffect, ChangeEvent } from "react";
 import { useRouter } from "next/navigation";
-import Layout from "@/components/kokonutui/layout";
+import Layout from "@/components/layout/layout";
 import { Button } from "@/components/ui/button";
 import { Product } from "@/models/products";
 import { Plus } from "lucide-react";
@@ -11,8 +11,8 @@ import {
   saveProductData,
   deleteProductData,
 } from "@/lib/productData";
-import { ProductModal } from "@/components/product-modal";
-import ProductTable from "@/components/product-table";
+import { ProductModal } from "@/components/modals/product-modal";
+import ProductTable from "@/components/tables/product-table";
 
 export default function ProductsPage() {
   const router = useRouter();
@@ -34,14 +34,14 @@ export default function ProductsPage() {
   // Fetch products and categories
   useEffect(() => {
     const authToken = document.cookie
-    .split("; ")
-    .find((row) => row.startsWith("Authorization="))
-    ?.split("=")[1];
+      .split("; ")
+      .find((row) => row.startsWith("Authorization="))
+      ?.split("=")[1];
 
-  if (!authToken) {
-    router.push("/login");
-    return;
-  }
+    if (!authToken) {
+      router.push("/login");
+      return;
+    }
 
     const fetchDataAsync = async () => {
       try {
@@ -55,8 +55,16 @@ export default function ProductsPage() {
             authToken
           ),
         ]);
-
-        setProducts(fetchedProducts);
+    
+        console.log("Fetched Products:", fetchedProducts);
+    
+        // Ensure all products have tieredPricing
+        const processedProducts = fetchedProducts.map((product: Product) => ({
+          ...product,
+          tieredPricing: product.tieredPricing || [{ minQuantity: 1, pricePerUnit: 0 }],
+        }));
+    
+        setProducts(processedProducts);
         setCategories(fetchedCategories);
       } catch (error) {
         console.error("Error loading data:", error);
@@ -150,10 +158,12 @@ export default function ProductsPage() {
   const handleEditProduct = (product: Product) => {
     setProductData({
       ...product,
-      tieredPricing: product.tieredPricing.map(tier => ({
-        minQuantity: tier.minQuantity,
-        pricePerUnit: tier.pricePerUnit
-      })),
+      tieredPricing: product.tieredPricing
+        ? product.tieredPricing.map(tier => ({
+            minQuantity: tier.minQuantity,
+            pricePerUnit: tier.pricePerUnit
+          }))
+        : [{ minQuantity: 1, pricePerUnit: 0 }], // Fallback if undefined
     });
     setEditing(true);
     setModalOpen(true);