(andri) fix

1 files changed, 380 insertions, 396 deletions

diff --git a/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx b/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx
index 4f1fcd82..f2d7ca57 100644
--- a/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx
+++ b/src-migrate/modules/product-detail/components/ProductComparisonModal.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from 'react'; // Tambah useRef
+import React, { useEffect, useState, useRef } from 'react';
 import {
   Modal,
   ModalOverlay,
@@ -26,7 +26,7 @@ import {
   ListItem,
   useToast,
   Select,
-  useOutsideClick // Tambah import ini
+  useOutsideClick
 } from '@chakra-ui/react';
 
 import { Search, Trash2 } from 'lucide-react';
@@ -41,20 +41,20 @@ const formatPrice = (price: number) => {
 };
 
 const renderSpecValue = (val: any) => {
-    if (!val || val === '-') return '-';
-    return String(val).replace(/<[^>]*>?/gm, ''); 
+  if (!val || val === '-') return '-';
+  return String(val).replace(/<[^>]*>?/gm, '');
 };
 
 type Props = {
   isOpen: boolean;
   onClose: () => void;
-  mainProduct: any;     
-  selectedVariant: any; 
+  mainProduct: any;
+  selectedVariant: any;
 };
 
 const ProductComparisonModal = ({ isOpen, onClose, mainProduct, selectedVariant }: Props) => {
   const toast = useToast();
-  
+
   // --- STATE ---
   const [products, setProducts] = useState<(any | null)[]>([null, null, null, null]);
   const [specsMatrix, setSpecsMatrix] = useState<any[]>([]);
@@ -67,16 +67,15 @@ const ProductComparisonModal = ({ isOpen, onClose, mainProduct, selectedVariant
   const [isSearching, setIsSearching] = useState(false);
 
   // --- REF & OUTSIDE CLICK ---
-  const searchWrapperRef = useRef<HTMLDivElement>(null); // Ref untuk mendeteksi klik
+  const searchWrapperRef = useRef<HTMLDivElement>(null);
 
   useOutsideClick({
     ref: searchWrapperRef,
     handler: () => {
-        // Jika user klik di luar area search yang aktif, tutup search
-        if (activeSearchSlot !== null) {
-            setActiveSearchSlot(null);
-            setSearchResults([]); // Opsional: bersihkan hasil juga
-        }
+      if (activeSearchSlot !== null) {
+        setActiveSearchSlot(null);
+        setSearchResults([]);
+      }
     },
   });
 
@@ -86,53 +85,53 @@ const ProductComparisonModal = ({ isOpen, onClose, mainProduct, selectedVariant
   useEffect(() => {
     if (isOpen && mainProduct) {
       let activeItem = selectedVariant;
-      
+
       if (!activeItem && mainProduct.variants && mainProduct.variants.length > 0) {
-          activeItem = mainProduct.variants[0];
+        activeItem = mainProduct.variants[0];
       }
       if (!activeItem) {
-          activeItem = mainProduct;
+        activeItem = mainProduct;
       }
 
       const targetId = activeItem.id;
       const displayCode = activeItem.default_code || activeItem.code || activeItem.sku || mainProduct.default_code || mainProduct.code;
 
       const variantOptions = mainProduct.variants?.map((v: any) => ({
-          id: v.id,
-          code: v.default_code || v.code || v.sku, 
-          name: v.name || v.displayName || v.display_name, 
-          price: v.price?.price || v.price || 0,
-          image: v.image
+        id: v.id,
+        code: v.default_code || v.code || v.sku,
+        name: v.name || v.displayName || v.display_name,
+        price: v.price?.price || v.price || 0,
+        image: v.image
       })) || [];
 
       if (variantOptions.length === 0) {
-          variantOptions.push({
-              id: targetId,
-              code: displayCode,
-              name: mainProduct.name,
-              price: activeItem.price?.price || activeItem.price || 0,
-              image: activeItem.image || mainProduct.image
-          });
+        variantOptions.push({
+          id: targetId,
+          code: displayCode,
+          name: mainProduct.name,
+          price: activeItem.price?.price || activeItem.price || 0,
+          image: activeItem.image || mainProduct.image
+        });
       }
 
       const displayName = activeItem.name || activeItem.displayName || mainProduct.name;
 
       const productSlot1 = {
-         id: targetId,
-         sku: targetId, 
-         realCode: displayCode, 
-         name: displayName, 
-         price: activeItem.price?.price || activeItem.price || mainProduct.lowest_price?.price || 0,
-         image: activeItem.image || mainProduct.image,
-         variants: variantOptions
+        id: targetId,
+        sku: targetId,
+        realCode: displayCode,
+        name: displayName,
+        price: activeItem.price?.price || activeItem.price || mainProduct.lowest_price?.price || 0,
+        image: activeItem.image || mainProduct.image,
+        variants: variantOptions
       };
 
       setProducts((prev) => {
-         const newSlots = [...prev];
-         if (!newSlots[0] || String(newSlots[0].id) !== String(targetId)) {
-             newSlots[0] = productSlot1;
-         }
-         return newSlots;
+        const newSlots = [...prev];
+        if (!newSlots[0] || String(newSlots[0].id) !== String(targetId)) {
+          newSlots[0] = productSlot1;
+        }
+        return newSlots;
       });
     }
   }, [isOpen, mainProduct, selectedVariant]);
@@ -145,226 +144,223 @@ const ProductComparisonModal = ({ isOpen, onClose, mainProduct, selectedVariant
     if (!isOpen || validProducts.length === 0) return;
 
     const fetchSpecs = async () => {
-        setIsLoadingMatrix(true);
-        try {
-            const allSkus = validProducts.map(p => p.sku).join(',');
-            const mainSku = validProducts[0]?.sku;
+      setIsLoadingMatrix(true);
+      try {
+        const allSkus = validProducts.map(p => p.sku).join(',');
+        const mainSku = validProducts[0]?.sku;
 
-            const res = await fetch(`/api/magento-product?skus=${allSkus}&main_sku=${mainSku}`);
-            if (!res.ok) return;
+        const res = await fetch(`/api/magento-product?skus=${allSkus}&main_sku=${mainSku}`);
+        if (!res.ok) return;
 
-            const data = await res.json();
-            if (data.specsMatrix) {
-                setSpecsMatrix(data.specsMatrix);
-            }
-        } catch (err) {
-            console.error(err);
-        } finally {
-            setIsLoadingMatrix(false);
+        const data = await res.json();
+        if (data.specsMatrix) {
+          setSpecsMatrix(data.specsMatrix);
         }
+      } catch (err) {
+        console.error(err);
+      } finally {
+        setIsLoadingMatrix(false);
+      }
     };
 
     fetchSpecs();
   }, [products, isOpen]);
 
   // ===========================================================================
-  // 3. SEARCH LOGIC 
+  // 3. SEARCH LOGIC
   // ===========================================================================
   useEffect(() => {
-     const delayDebounceFn = setTimeout(async () => {
-        if (searchQuery.length > 0 && searchQuery.length < 3) {
-            setSearchResults([]);
-            return;
-        }
+    const delayDebounceFn = setTimeout(async () => {
+      if (searchQuery.length > 0 && searchQuery.length < 3) {
+        setSearchResults([]);
+        return;
+      }
 
-        if (activeSearchSlot === null) return;
+      if (activeSearchSlot === null) return;
 
-        const attrSetId = selectedVariant?.attribute_set_id || mainProduct?.attribute_set_id;
+      const attrSetId = selectedVariant?.attribute_set_id || mainProduct?.attribute_set_id;
 
-        if (!attrSetId) {
-            console.warn("Search dibatalkan: Produk utama tidak memiliki attribute_set_id");
-            setSearchResults([]); 
-            setIsSearching(false);
-            return;
-        }
+      if (!attrSetId) {
+        console.warn("Search dibatalkan: Produk utama tidak memiliki attribute_set_id");
+        setSearchResults([]);
+        setIsSearching(false);
+        return;
+      }
 
-        setIsSearching(true);
-        try {
-            const queryParam = searchQuery === '' ? '*' : searchQuery;
+      setIsSearching(true);
+      try {
+        const queryParam = searchQuery === '' ? '*' : searchQuery;
 
-            const params = new URLSearchParams({
-                source: 'compare',
-                q: queryParam,     
-                limit: '20',       
-                fq: `attribute_set_id_i:${attrSetId}` 
-            });
+        const params = new URLSearchParams({
+          source: 'compare',
+          q: queryParam,
+          limit: '20',
+          fq: `attribute_set_id_i:${attrSetId}`
+        });
 
-            const res = await fetch(`/api/shop/search?${params.toString()}`);
-            
-            if (res.ok) {
-                const data = await res.json();
-                setSearchResults(data.response?.products || []);
-            } else {
-                setSearchResults([]);
-            }
-        } catch (e) {
-            setSearchResults([]);
-        } finally {
-            setIsSearching(false);
+        const res = await fetch(`/api/shop/search?${params.toString()}`);
+
+        if (res.ok) {
+          const data = await res.json();
+          setSearchResults(data.response?.products || []);
+        } else {
+          setSearchResults([]);
         }
-     }, 500);
+      } catch (e) {
+        setSearchResults([]);
+      } finally {
+        setIsSearching(false);
+      }
+    }, 500);
 
-     return () => clearTimeout(delayDebounceFn);
+    return () => clearTimeout(delayDebounceFn);
   }, [searchQuery, mainProduct, selectedVariant, activeSearchSlot]);
 
   // ===========================================================================
   // 4. HANDLERS
   // ===========================================================================
   const handleVariantChange = (slotIndex: number, newId: string) => {
-      const currentProduct = products[slotIndex];
-      if (!currentProduct || !currentProduct.variants) return;
-
-      const selectedVar = currentProduct.variants.find((v: any) => String(v.id) === String(newId));
-      
-      if (selectedVar) {
-          const newProducts = [...products];
-          newProducts[slotIndex] = {
-              ...currentProduct,
-              id: selectedVar.id,
-              sku: selectedVar.id, 
-              name: selectedVar.name,
-              realCode: selectedVar.code,
-              price: selectedVar.price,
-              image: selectedVar.image
-          };
-          setProducts(newProducts);
-      }
-  };
+    const currentProduct = products[slotIndex];
+    if (!currentProduct || !currentProduct.variants) return;
 
+    const selectedVar = currentProduct.variants.find((v: any) => String(v.id) === String(newId));
 
+    if (selectedVar) {
+      const newProducts = [...products];
+      newProducts[slotIndex] = {
+        ...currentProduct,
+        id: selectedVar.id,
+        sku: selectedVar.id,
+        name: selectedVar.name,
+        realCode: selectedVar.code,
+        price: selectedVar.price,
+        image: selectedVar.image
+      };
+      setProducts(newProducts);
+    }
+  };
 
   const handleAddProduct = async (searchItem: any, slotIndex: number) => {
+    if (products.find(p => p && String(p.id) === String(searchItem.id))) {
+      toast({ title: "Produk sudah ada", status: "warning", position: "top" });
+      return;
+    }
 
-      if (products.find(p => p && String(p.id) === String(searchItem.id))) {
-          toast({ title: "Produk sudah ada", status: "warning", position: "top" });
-          return;
-      }
-
-      const idToAdd = searchItem.id;
-      const codeToAdd = searchItem.defaultCode || searchItem.default_code || searchItem.code; 
-      const nameToAdd = searchItem.displayName || searchItem.name;
-      const imageToAdd = searchItem.image || searchItem.imageS || searchItem.image_s; 
-      const priceToAdd = searchItem.lowestPrice?.price || searchItem.priceTier1V2F || searchItem.price || 0; 
-      
-      let parentId = searchItem.templateId || 
-                     searchItem.templateIdI || 
-                     searchItem.template_id_i || 
-                     searchItem.template_id;
-
-      if (!parentId) {
-          try {
-              const checkParams = new URLSearchParams({
-                  source: 'upsell',
-                  q: '*:*',
-                  fq: `id:${idToAdd}` 
-              });
-
-              const checkRes = await fetch(`/api/shop/search?${checkParams.toString()}`);
-              if (checkRes.ok) {
-                  const checkData = await checkRes.json();
-                  const freshItem = checkData.response?.products?.[0];
-                  
-                  if (freshItem) {
-                      const serverReturnedId = freshItem.id; 
-                      if (String(serverReturnedId) !== String(idToAdd)) {
-                          parentId = serverReturnedId;
-                      } else {
-                          parentId = freshItem.templateId || freshItem.templateIdI || idToAdd;
-                      }
-                  }
-              }
-          } catch (e) {
-              console.error("Gagal validasi parent:", e);
-              parentId = idToAdd;
+    const idToAdd = searchItem.id;
+    const codeToAdd = searchItem.defaultCode || searchItem.default_code || searchItem.code;
+    const nameToAdd = searchItem.displayName || searchItem.name;
+    const imageToAdd = searchItem.image || searchItem.imageS || searchItem.image_s;
+    const priceToAdd = searchItem.lowestPrice?.price || searchItem.priceTier1V2F || searchItem.price || 0;
+
+    let parentId = searchItem.templateId ||
+      searchItem.templateIdI ||
+      searchItem.template_id_i ||
+      searchItem.template_id;
+
+    if (!parentId) {
+      try {
+        const checkParams = new URLSearchParams({
+          source: 'upsell',
+          q: '*:*',
+          fq: `id:${idToAdd}`
+        });
+
+        const checkRes = await fetch(`/api/shop/search?${checkParams.toString()}`);
+        if (checkRes.ok) {
+          const checkData = await checkRes.json();
+          const freshItem = checkData.response?.products?.[0];
+
+          if (freshItem) {
+            const serverReturnedId = freshItem.id;
+            if (String(serverReturnedId) !== String(idToAdd)) {
+              parentId = serverReturnedId;
+            } else {
+              parentId = freshItem.templateId || freshItem.templateIdI || idToAdd;
+            }
           }
+        }
+      } catch (e) {
+        console.error("Gagal validasi parent:", e);
+        parentId = idToAdd;
       }
-      
-      const newProductEntry = {
-          id: idToAdd,
-          sku: idToAdd, 
-          realCode: codeToAdd, 
-          name: nameToAdd,
-          price: priceToAdd,
-          image: imageToAdd,
-          variants: [{
-              id: idToAdd,
-              code: codeToAdd,
-              name: nameToAdd,
-              price: priceToAdd,
-              image: imageToAdd
-          }]
-      };
+    }
 
-      setProducts((prev) => {
-          const newSlots = [...prev];
-          newSlots[slotIndex] = newProductEntry;
-          return newSlots;
-      });
+    const newProductEntry = {
+      id: idToAdd,
+      sku: idToAdd,
+      realCode: codeToAdd,
+      name: nameToAdd,
+      price: priceToAdd,
+      image: imageToAdd,
+      variants: [{
+        id: idToAdd,
+        code: codeToAdd,
+        name: nameToAdd,
+        price: priceToAdd,
+        image: imageToAdd
+      }]
+    };
 
-      setActiveSearchSlot(null);
-      setSearchQuery('');
-      setSearchResults([]);
-
-      if (parentId) {
-          try {
-              const params = new URLSearchParams({
-                  source: 'upsell', 
-                  limit: '100', 
-                  fq: `template_id_i:${parentId}` 
-              });
-
-              const res = await fetch(`/api/shop/search?${params.toString()}`);
-              
-              if (res.ok) {
-                  const data = await res.json();
-                  const siblings = data.response?.products || [];
-
-                  if (siblings.length > 0) {
-                      const allVariants = siblings.map((s: any) => ({
-                          id: s.variantId || s.productIdI || s.id, 
-                          code: s.defaultCode || s.default_code || s.code, 
-                          name: s.displayName || s.name || s.nameS,
-                          price: s.lowestPrice?.price || s.priceTier1V2F || 0,
-                          image: s.image || s.imageS
-                      }));
-
-                      allVariants.sort((a: any, b: any) => 
-                        String(a.code).localeCompare(String(b.code))
-                      );
-
-                      setProducts((prev) => {
-                          const updated = [...prev];
-                          if (updated[slotIndex] && String(updated[slotIndex].id) === String(idToAdd)) {
-                              updated[slotIndex] = {
-                                  ...updated[slotIndex],
-                                  variants: allVariants 
-                              };
-                          }
-                          return updated;
-                      });
-                  }
+    setProducts((prev) => {
+      const newSlots = [...prev];
+      newSlots[slotIndex] = newProductEntry;
+      return newSlots;
+    });
+
+    setActiveSearchSlot(null);
+    setSearchQuery('');
+    setSearchResults([]);
+
+    if (parentId) {
+      try {
+        const params = new URLSearchParams({
+          source: 'upsell',
+          limit: '100',
+          fq: `template_id_i:${parentId}`
+        });
+
+        const res = await fetch(`/api/shop/search?${params.toString()}`);
+
+        if (res.ok) {
+          const data = await res.json();
+          const siblings = data.response?.products || [];
+
+          if (siblings.length > 0) {
+            const allVariants = siblings.map((s: any) => ({
+              id: s.variantId || s.productIdI || s.id,
+              code: s.defaultCode || s.default_code || s.code,
+              name: s.displayName || s.name || s.nameS,
+              price: s.lowestPrice?.price || s.priceTier1V2F || 0,
+              image: s.image || s.imageS
+            }));
+
+            allVariants.sort((a: any, b: any) =>
+              String(a.code).localeCompare(String(b.code))
+            );
+
+            setProducts((prev) => {
+              const updated = [...prev];
+              if (updated[slotIndex] && String(updated[slotIndex].id) === String(idToAdd)) {
+                updated[slotIndex] = {
+                  ...updated[slotIndex],
+                  variants: allVariants
+                };
               }
-          } catch (error) {
-              console.error("Gagal fetch variant lain:", error);
+              return updated;
+            });
           }
+        }
+      } catch (error) {
+        console.error("Gagal fetch variant lain:", error);
       }
+    }
   };
 
   const handleRemoveProduct = (index: number) => {
-      const newProducts = [...products];
-      newProducts[index] = null;
-      setProducts(newProducts);
-      if (newProducts.every(p => p === null)) setSpecsMatrix([]);
+    const newProducts = [...products];
+    newProducts[index] = null;
+    setProducts(newProducts);
+    if (newProducts.every(p => p === null)) setSpecsMatrix([]);
   };
 
   return (
@@ -379,7 +375,7 @@ const ProductComparisonModal = ({ isOpen, onClose, mainProduct, selectedVariant
             </Badge>
           </HStack>
           <Text fontSize="sm" color="gray.500" fontWeight="normal" mt={1}>
-              Detail Spesifikasi Produk yang kamu pilih
+            Detail Spesifikasi Produk yang kamu pilih
           </Text>
         </ModalHeader>
         <ModalCloseButton />
@@ -392,16 +388,16 @@ const ProductComparisonModal = ({ isOpen, onClose, mainProduct, selectedVariant
                 {product ? (
                   <VStack align="stretch" spacing={3} h="100%">
                     {index !== 0 && (
-                        <IconButton 
-                            aria-label="Hapus" icon={<Trash2 size={16}/>} 
-                            size="xs" position="absolute" top={-2} right={-2} 
-                            colorScheme="red" onClick={() => handleRemoveProduct(index)} zIndex={2}
-                        />
+                      <IconButton
+                        aria-label="Hapus" icon={<Trash2 size={16} />}
+                        size="xs" position="absolute" top={-2} right={-2}
+                        colorScheme="red" onClick={() => handleRemoveProduct(index)} zIndex={2}
+                      />
                     )}
                     <Box h="160px" display="flex" alignItems="center" justifyContent="center" bg="gray.50" borderRadius="md" p={2}>
-                      <Image 
-                        src={product.image || '/images/no-image-compare.svg'} 
-                        alt={product.name} maxH="100%" objectFit="contain" 
+                      <Image
+                        src={product.image || '/images/no-image-compare.svg'}
+                        alt={product.name} maxH="100%" objectFit="contain"
                         onError={(e) => { (e.target as HTMLImageElement).src = '/images/no-image-compare.svg'; }}
                       />
                     </Box>
@@ -413,200 +409,188 @@ const ProductComparisonModal = ({ isOpen, onClose, mainProduct, selectedVariant
                         {product.name}
                       </Text>
                     </Box>
-                    
-                    <Select 
-                        size="sm" borderRadius="md" fontSize="xs"
-                        value={product.id} 
-                        onChange={(e) => handleVariantChange(index, e.target.value)}
-                        isDisabled={false} bg="white"
+
+                    <Select
+                      size="sm" borderRadius="md" fontSize="xs"
+                      value={product.id}
+                      onChange={(e) => handleVariantChange(index, e.target.value)}
+                      isDisabled={false} bg="white"
                     >
-                        {product.variants && product.variants.map((v: any) => (
-                            <option key={v.id} value={v.id}>{v.code}</option>
-                        ))}
+                      {product.variants && product.variants.map((v: any) => (
+                        <option key={v.id} value={v.id}>{v.code}</option>
+                      ))}
                     </Select>
 
                     <HStack spacing={2}>
-                        <IconButton 
-                            aria-label="Cart" 
-                            icon={<Image src="/images/keranjang-compare.svg" w="15px" h="15px" objectFit="contain" />} 
-                            variant="outline" 
-                            colorScheme="red" 
-                            size="sm" 
-                        />
-                        <Button as="a" href={`/product/${product.id}`} target="_blank" colorScheme="red" size="sm" flex={1} fontSize="xs">
-                            Beli Sekarang
-                        </Button>
+                      <IconButton
+                        aria-label="Cart"
+                        icon={<Image src="/images/keranjang-compare.svg" w="15px" h="15px" objectFit="contain" />}
+                        variant="outline"
+                        colorScheme="red"
+                        size="sm"
+                      />
+                      <Button as="a" href={`/product/${product.id}`} target="_blank" colorScheme="red" size="sm" flex={1} fontSize="xs">
+                        Beli Sekarang
+                      </Button>
                     </HStack>
                   </VStack>
                 ) : (
                   <VStack align="stretch" spacing={3} h="100%" position="relative">
-                    
-                    {/* WRAPPER SEARCH DENGAN REF */}
-                    {/* Hanya berikan ref jika ini adalah slot yang sedang aktif dicari */}
                     <Box position="relative" w="100%" ref={activeSearchSlot === index ? searchWrapperRef : null}>
-                        <InputGroup size="sm">
-                            <InputLeftElement pointerEvents="none"><Icon as={Search} color="gray.300" /></InputLeftElement>
-                            <Input 
-                                placeholder="Cari Produk..." borderRadius="md" 
-                                value={activeSearchSlot === index ? searchQuery : ''}
-                                onFocus={() => { setActiveSearchSlot(index); setSearchQuery(''); }}
-                                onChange={(e) => setSearchQuery(e.target.value)}
-                            />
-                        </InputGroup>
-
-                        {/* HASIL SEARCH */}
-                        {activeSearchSlot === index && (
-                            <Box position="absolute" top="35px" left={0} right={0} bg="white" boxShadow="lg" zIndex={10} borderRadius="md" border="1px solid" borderColor="gray.200" maxH="250px" overflowY="auto">
-                                
-                                {/* CEK ATTRIBUTE SET ID */}
-                                {!selectedVariant?.attribute_set_id && !mainProduct?.attribute_set_id ? (
-                                    <Box p={4} fontSize="xs" color="orange.600" textAlign="center" bg="orange.50">
-                                        <Text fontWeight="bold" mb={1}>Perbandingan Tidak Tersedia</Text>
-                                        <Text>Produk utama tidak memiliki data kategori yang valid untuk dibandingkan.</Text>
-                                    </Box>
-                                ) : (
-                                    <>
-                                        {isSearching ? (
-                                            <Box p={4} textAlign="center"><Spinner size="sm" color="red.500"/></Box>
-                                        ) : searchResults.length > 0 ? (
-                                            <List spacing={0}>
-                                                {searchResults.map((res) => (
-                                                    <ListItem 
-                                                        key={res.id} 
-                                                        p={3}
-                                                        borderBottom="1px solid #f0f0f0" 
-                                                        _hover={{ bg: 'red.50', cursor: 'pointer' }}
-                                                        onClick={() => handleAddProduct(res, index)}
-                                                    >
-                                                        <Flex align="flex-start" gap={3}> {/* Align top biar rapi kalau teks panjang */}
-                                                            {/* GAMBAR */}
-                                                            <Image 
-                                                                src={res.image || '/images/no-image-compare.svg'} 
-                                                                boxSize="40px" // Gambar sedikit dibesarkan
-                                                                objectFit="contain" 
-                                                                onError={(e) => { (e.target as HTMLImageElement).src = '/images/no-image-compare.svg'; }} 
-                                                                flexShrink={0} // Mencegah gambar gepeng
-                                                                mt={1}
-                                                            />
-                                                            
-                                                            {/* TEXT CONTAINER */}
-                                                            <Box flex={1} w="0"> {/* w="0" adalah trik CSS agar text-overflow bekerja di dalam Flex */}
-                                                                <Text 
-                                                                    fontSize="xs" 
-                                                                    fontWeight="bold" 
-                                                                    noOfLines={2} // [SOLUSI UTAMA] Ijinkan maksimal 2 baris
-                                                                    lineHeight="shorter" // Spasi antar baris dirapatkan
-                                                                    whiteSpace="normal" // Pastikan text wrapping aktif
-                                                                    mb={1}
-                                                                    title={res.displayName || res.name} // Menampilkan tooltip native saat hover
-                                                                >
-                                                                    {res.displayName || res.name}
-                                                                </Text>
-                                                                <Text fontSize="xs" color="red.500" fontWeight="bold">
-                                                                    {formatPrice(res.lowestPrice?.price || 0)}
-                                                                </Text>
-                                                            </Box>
-                                                        </Flex>
-                                                    </ListItem>
-                                                ))}
-                                            </List>
-                                        ) : (
-                                            <Box p={3} fontSize="xs" color="gray.500" textAlign="center">
-                                                {searchQuery === '' ? 'Menampilkan rekomendasi...' : 'Produk tidak ditemukan.'}
-                                            </Box>
-                                        )}
-                                    </>
-                                )}
+                      <InputGroup size="sm">
+                        <InputLeftElement pointerEvents="none"><Icon as={Search} color="gray.300" /></InputLeftElement>
+                        <Input
+                          placeholder="Cari Produk..." borderRadius="md"
+                          value={activeSearchSlot === index ? searchQuery : ''}
+                          onFocus={() => { setActiveSearchSlot(index); setSearchQuery(''); }}
+                          onChange={(e) => setSearchQuery(e.target.value)}
+                        />
+                      </InputGroup>
+
+                      {activeSearchSlot === index && (
+                        <Box position="absolute" top="35px" left={0} right={0} bg="white" boxShadow="lg" zIndex={10} borderRadius="md" border="1px solid" borderColor="gray.200" maxH="250px" overflowY="auto">
+                          {!selectedVariant?.attribute_set_id && !mainProduct?.attribute_set_id ? (
+                            <Box p={4} fontSize="xs" color="orange.600" textAlign="center" bg="orange.50">
+                              <Text fontWeight="bold" mb={1}>Perbandingan Tidak Tersedia</Text>
+                              <Text>Produk utama tidak memiliki data kategori yang valid untuk dibandingkan.</Text>
                             </Box>
-                        )}
+                          ) : (
+                            <>
+                              {isSearching ? (
+                                <Box p={4} textAlign="center"><Spinner size="sm" color="red.500" /></Box>
+                              ) : searchResults.length > 0 ? (
+                                <List spacing={0}>
+                                  {searchResults.map((res) => (
+                                    <ListItem
+                                      key={res.id}
+                                      p={3}
+                                      borderBottom="1px solid #f0f0f0"
+                                      _hover={{ bg: 'red.50', cursor: 'pointer' }}
+                                      onClick={() => handleAddProduct(res, index)}
+                                    >
+                                      <Flex align="flex-start" gap={3}>
+                                        <Image
+                                          src={res.image || '/images/no-image-compare.svg'}
+                                          boxSize="40px"
+                                          objectFit="contain"
+                                          onError={(e) => { (e.target as HTMLImageElement).src = '/images/no-image-compare.svg'; }}
+                                          flexShrink={0}
+                                          mt={1}
+                                        />
+                                        <Box flex={1} w="0">
+                                          <Text
+                                            fontSize="xs"
+                                            fontWeight="bold"
+                                            noOfLines={2}
+                                            lineHeight="shorter"
+                                            whiteSpace="normal"
+                                            mb={1}
+                                            title={res.displayName || res.name}
+                                          >
+                                            {res.displayName || res.name}
+                                          </Text>
+                                          <Text fontSize="xs" color="red.500" fontWeight="bold">
+                                            {formatPrice(res.lowestPrice?.price || 0)}
+                                          </Text>
+                                        </Box>
+                                      </Flex>
+                                    </ListItem>
+                                  ))}
+                                </List>
+                              ) : (
+                                <Box p={3} fontSize="xs" color="gray.500" textAlign="center">
+                                  {searchQuery === '' ? 'Menampilkan rekomendasi...' : 'Produk tidak ditemukan.'}
+                                </Box>
+                              )}
+                            </>
+                          )}
+                        </Box>
+                      )}
                     </Box>
 
-                    {/* SLOT KOSONG */}
-                    <Flex 
-                        direction="column" 
-                        align="center" 
-                        justify="center" 
-                        flex={1} 
-                        bg="gray.50" 
-                        borderRadius="md" 
+                    <Flex
+                      direction="column"
+                      align="center"
+                      justify="center"
+                      flex={1}
+                      bg="gray.50"
+                      borderRadius="md"
                     >
-                        <Image 
-                            src="/images/no-image-compare.svg" 
-                            alt="Empty Slot" 
-                            boxSize="125px" 
-                            mb={2} 
-                            opacity={0.6}
-                        />
-                        <Text fontSize="xs" color="gray.500" textAlign="center">
-                            Produk Belum Ditambahkan
-                        </Text>
+                      <Image
+                        src="/images/no-image-compare.svg"
+                        alt="Empty Slot"
+                        boxSize="125px"
+                        mb={2}
+                        opacity={0.6}
+                      />
+                      <Text fontSize="xs" color="gray.500" textAlign="center">
+                        Produk Belum Ditambahkan
+                      </Text>
                     </Flex>
                   </VStack>
                 )}
               </GridItem>
             ))}
 
-            {/* --- HEADER SPESIFIKASI --- */}
             <GridItem colSpan={5} py={6} display="flex" alignItems="center" justifyContent="space-between">
-               <Box borderBottom="2px solid" borderColor="gray.100" pb={2} width="100%">
-                  <HStack>
-                    <Text fontSize="lg" fontWeight="bold">Spesifikasi Teknis</Text>
-                    {isLoadingMatrix && specsMatrix.length > 0 && (
-                        <HStack spacing={2}>
-                            <Spinner size="xs" color="red.500" />
-                            <Text fontSize="xs" color="gray.500">Updating...</Text>
-                        </HStack>
-                    )}
-                  </HStack>
-               </Box>
+              <Box borderBottom="2px solid" borderColor="gray.100" pb={2} width="100%">
+                <HStack>
+                  <Text fontSize="lg" fontWeight="bold">Spesifikasi Teknis</Text>
+                  {isLoadingMatrix && specsMatrix.length > 0 && (
+                    <HStack spacing={2}>
+                      <Spinner size="xs" color="red.500" />
+                      <Text fontSize="xs" color="gray.500">Updating...</Text>
+                    </HStack>
+                  )}
+                </HStack>
+              </Box>
             </GridItem>
 
-            {/* --- MATRIX SPEK --- */}
             {isLoadingMatrix && specsMatrix.length === 0 ? (
-                 <GridItem colSpan={5} textAlign="center" py={10}>
-                    <Spinner color="red.500" thickness="4px" size="xl" />
-                    <Text mt={2} color="gray.500">Memuat data...</Text>
-                 </GridItem>
+              <GridItem colSpan={5} textAlign="center" py={10}>
+                <Spinner color="red.500" thickness="4px" size="xl" />
+                <Text mt={2} color="gray.500">Memuat data...</Text>
+              </GridItem>
             ) : specsMatrix.length > 0 ? (
-                specsMatrix.map((row, rowIndex) => (
-                  <React.Fragment key={row.code || rowIndex}>
-                    <GridItem 
-                        py={3} px={2} 
-                        borderBottom="1px solid" borderColor="gray.100" 
-                        bg={rowIndex % 2 !== 0 ? "white" : "gray.50"} 
-                        display="flex" alignItems="center"
+              specsMatrix.map((row, rowIndex) => (
+                <React.Fragment key={row.code || rowIndex}>
+                  <GridItem
+                    py={3} px={2}
+                    borderBottom="1px solid" borderColor="gray.100"
+                    bg={rowIndex % 2 !== 0 ? "white" : "gray.50"}
+                    display="flex" alignItems="center"
+                    opacity={isLoadingMatrix ? 0.6 : 1}
+                    transition="opacity 0.2s"
+                  >
+                    <Text fontWeight="bold" fontSize="sm" color="gray.700">{row.label}</Text>
+                  </GridItem>
+
+                  {products.map((product, colIndex) => {
+                    const val = product ? (row.values[String(product.sku)] || '-') : '';
+                    return (
+                      <GridItem
+                        key={`${row.code}-${colIndex}`}
+                        py={3} px={2}
+                        borderBottom="1px solid" borderColor="gray.100"
+                        bg={rowIndex % 2 !== 0 ? "white" : "gray.50"}
+                        display="flex" alignItems="center" justifyContent="center" textAlign="center"
                         opacity={isLoadingMatrix ? 0.6 : 1}
                         transition="opacity 0.2s"
-                    >
-                      <Text fontWeight="bold" fontSize="sm" color="gray.700">{row.label}</Text>
-                    </GridItem>
-
-                    {products.map((product, colIndex) => {
-                        const val = product ? (row.values[String(product.sku)] || '-') : '';
-                        return (
-                          <GridItem 
-                            key={`${row.code}-${colIndex}`} 
-                            py={3} px={2} 
-                            borderBottom="1px solid" borderColor="gray.100" 
-                            bg={rowIndex % 2 !== 0 ? "white" : "gray.50"} 
-                            display="flex" alignItems="center" justifyContent="center" textAlign="center"
-                            opacity={isLoadingMatrix ? 0.6 : 1}
-                            transition="opacity 0.2s"
-                          >
-                             {isLoadingMatrix && product && !row.values[String(product.sku)] ? (
-                                <Spinner size="xs" color="gray.400"/> 
-                             ) : (
-                                <Text fontSize="sm" color="gray.600">{renderSpecValue(val)}</Text>
-                             )}
-                          </GridItem>
-                        );
-                    })}
-                  </React.Fragment>
-                ))
+                      >
+                        {isLoadingMatrix && product && !row.values[String(product.sku)] ? (
+                          <Spinner size="xs" color="gray.400" />
+                        ) : (
+                          <Text fontSize="sm" color="gray.600">{renderSpecValue(val)}</Text>
+                        )}
+                      </GridItem>
+                    );
+                  })}
+                </React.Fragment>
+              ))
             ) : (
-                <GridItem colSpan={5} py={10} textAlign="center" color="gray.500" bg="gray.50">
-                    <Text>Data spesifikasi belum tersedia untuk produk ini.</Text>
-                </GridItem>
+              <GridItem colSpan={5} py={10} textAlign="center" color="gray.500" bg="gray.50">
+                <Text>Data spesifikasi belum tersedia untuk produk ini.</Text>
+              </GridItem>
             )}
           </Grid>
         </ModalBody>