1 files changed, 36 insertions, 19 deletions

diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx
index 5f930117..cfe73628 100644
--- a/src-migrate/modules/product-detail/components/ProductDetail.tsx
+++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx
@@ -67,6 +67,8 @@ const ProductDetail = ({ product }: Props) => {
   // State Data dari Magento
   const [specs, setSpecs] = useState<{ code: string; label: string; value: string }[]>([]);
   const [upsellIds, setUpsellIds] = useState<number[]>([]);
+  const [relatedIds, setRelatedIds] = useState<number[]>([]); 
+  
   const [loadingSpecs, setLoadingSpecs] = useState(false);
   const [errorSpecs, setErrorSpecs] = useState(false);
 
@@ -109,7 +111,7 @@ const ProductDetail = ({ product }: Props) => {
   }, [router.asPath, product.manufacture.name, product.name, setAskAdminUrl]);
 
   // =========================================================================
-  // LOGIC INISIALISASI VARIANT (HANDLE NAVIGASI)
+  // LOGIC INISIALISASI VARIANT (RESET SAAT NAVIGASI)
   // =========================================================================
   useEffect(() => {
     if (typeof auth === 'object') {
@@ -121,28 +123,29 @@ const ProductDetail = ({ product }: Props) => {
     
     setSelectedVariant(variantInit);
 
-    // Reset data Magento saat produk berubah
+    // Reset data Magento
     setSpecs([]);
     setUpsellIds([]);
+    setRelatedIds([]);
     
   }, [product, auth]); 
 
   // =========================================================================
-  // LOGIC FETCH: SPECS & UPSELLS
+  // LOGIC FETCH: SPECS, UPSELLS, RELATED
   // =========================================================================
   useEffect(() => {
     const fetchMagentoData = async () => {
-      // Gunakan ID Variant (SKU Odoo)
-      const idToFetch = selectedVariant?.id; 
+      // Validasi kepemilikan varian
+      if (!selectedVariant?.id) return;
+      const isVariantOwner = product.variants.some(v => Number(v.id) === Number(selectedVariant.id));
+      if (!isVariantOwner) return;
 
-      if (!idToFetch) return;
+      const idToFetch = selectedVariant.id;
 
       setLoadingSpecs(true);
       setErrorSpecs(false);
       
       try {
-        console.log("Fetching Magento data via Proxy for ID:", idToFetch);
-        
         const endpoint = `/api/magento-product?sku=${encodeURIComponent(String(idToFetch))}`;
 
         const response = await fetch(endpoint, {
@@ -151,61 +154,75 @@ const ProductDetail = ({ product }: Props) => {
         });
 
         if (!response.ok) {
-            console.warn(`Magento API status: ${response.status}`);
             setSpecs([]);
             setUpsellIds([]);
+            setRelatedIds([]);
             return;
         }
 
         const data = await response.json();
 
-        // 1. Simpan Data Spesifikasi
+        // Double Check
+        if (Number(idToFetch) !== Number(selectedVariant.id)) return;
+
+        // 1. Specs
         if (data.specs && Array.isArray(data.specs)) {
            setSpecs(data.specs);
         } else {
            setSpecs([]);
         }
 
-        // 2. Simpan Data Up-Sells (ID)
+        // 2. Upsell
         if (data.upsell_ids && Array.isArray(data.upsell_ids)) {
             setUpsellIds(data.upsell_ids);
         } else {
             setUpsellIds([]);
         }
 
+        // 3. Related
+        if (data.related_ids && Array.isArray(data.related_ids)) {
+            setRelatedIds(data.related_ids);
+        } else {
+            setRelatedIds([]);
+        }
+
       } catch (error) {
         console.error("Gagal mengambil data Magento:", error);
         setErrorSpecs(true);
         setSpecs([]);
         setUpsellIds([]);
+        setRelatedIds([]);
       } finally {
         setLoadingSpecs(false);
       }
     };
 
     fetchMagentoData();
-  }, [selectedVariant, product.id]); 
+  }, [selectedVariant, product]); 
 
 
   // =========================================================================
-  // HELPER: RENDER SPEC VALUE (SIMPLE TEXT/HTML ONLY)
+  // HELPER: RENDER SPEC VALUE (SIMPLE - NO LINK DETECT)
   // =========================================================================
   const renderSpecValue = (item: { code: string; label: string; value: string }) => {
     const val = item.value;
     if (!val) return '-';
     
-    // Cek apakah mengandung tag HTML sederhana (<p>, <a>, <ul>, dll)
-    if (val.includes('<') && val.includes('>')) {
+    const cleanVal = val.trim();
+
+    // 1. JIKA HTML (Legacy Data)
+    // Deteksi tag HTML sederhana
+    if (cleanVal.includes('<') && cleanVal.includes('>')) {
        return (
          <div 
            className="prose prose-sm text-gray-700"
-           dangerouslySetInnerHTML={{ __html: val }}
+           dangerouslySetInnerHTML={{ __html: cleanVal }}
          />
        );
     }
 
-    // Default: Teks Biasa
-    return val;
+    // 2. TEKS BIASA
+    return cleanVal;
   };
 
 
@@ -544,7 +561,7 @@ const ProductDetail = ({ product }: Props) => {
             <div className='h-6' />
             <div className={style['heading']}>Produk Serupa</div>
             <div className='h-4' />
-            <SimilarSide product={product} />
+            <SimilarSide product={product} relatedIds={relatedIds} />
           </div>
         )}