From 629133beeb7f5668b63db61e415cf844d513cde7 Mon Sep 17 00:00:00 2001
From: FIN-IT_AndriFP <andrifebriyadiputra@gmail.com>
Date: Thu, 27 Nov 2025 14:30:30 +0700
Subject: (andri) view from magento

---
 .../product-detail/components/Information.tsx      | 114 +++++++++++++++------
 1 file changed, 82 insertions(+), 32 deletions(-)

(limited to 'src-migrate/modules/product-detail/components/Information.tsx')

diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx
index a7a58cbc..b7d3401e 100644
--- a/src-migrate/modules/product-detail/components/Information.tsx
+++ b/src-migrate/modules/product-detail/components/Information.tsx
@@ -11,12 +11,11 @@ import Link from 'next/link';
 import { useEffect, useRef, useState } from 'react';
 
 import currencyFormat from '@/core/utils/currencyFormat';
-import { InputGroup, InputRightElement, Spinner } from '@chakra-ui/react';
+import { InputGroup, InputRightElement, SimpleGrid, Flex, Text, Box } from '@chakra-ui/react';
 import { ChevronDownIcon } from '@heroicons/react/24/outline';
 import Image from 'next/image';
 import { formatToShortText } from '~/libs/formatNumber';
 import { createSlug } from '~/libs/slug';
-import { getVariantSLA } from '~/services/productVariant';
 import { IProductDetail } from '~/types/product';
 import { useProductDetail } from '../stores/useProductDetail';
 import useVariant from '../hook/useVariant';
@@ -30,7 +29,7 @@ type Props = {
 };
 
 const Information = ({ product }: Props) => {
-  const { selectedVariant, setSelectedVariant, setSla, setActive, sla } =
+  const { selectedVariant, setSelectedVariant, setSla, sla } =
     useProductDetail();
 
   const [inputValue, setInputValue] = useState<string | null>(
@@ -45,15 +44,6 @@ const Information = ({ product }: Props) => {
   const variantId = selectedVariant?.id;
   const { slaVariant, isLoading } = useVariant({ variantId });
 
-  // let variantOptions = product?.variants;
-
-  // const querySLA = useQuery<IProductVariantSLA>({
-  //   queryKey: ['variant-sla', selectedVariant?.id],
-  //   queryFn: () => getVariantSLA(selectedVariant?.id),
-  //   enabled: !!selectedVariant?.id,
-  // });
-  // const sla = querySLA?.data;
-
   useEffect(() => {
     if (selectedVariant) {
       setInputValue(
@@ -66,14 +56,13 @@ const Information = ({ product }: Props) => {
   }, [selectedVariant]);
 
   useEffect(() => {
-    if (isLoading){
+    if (isLoading) {
       setSla(null);
     }
     if (slaVariant) {
       setSla(slaVariant);
     }
-  }, [slaVariant, isLoading]);
-  
+  }, [slaVariant, isLoading, setSla]);
 
   const handleOnChange = (vals: any) => {
     setDisableFilter(true);
@@ -98,6 +87,15 @@ const Information = ({ product }: Props) => {
     setInputValue(e.target.value);
   };
 
+  // STYLE CUSTOM UNTUK BARIS (Item Code, dll)
+  const rowStyle = {
+    backgroundColor: '#ffffff',
+    fontSize: '13px',
+    borderBottom: '1px dashed #e2e8f0',
+    padding: '8px 0',
+    marginBottom: '0px'
+  };
+
   return (
     <div className={style['wrapper']}>
       <div className='realtive mb-5'>
@@ -183,12 +181,15 @@ const Information = ({ product }: Props) => {
         </AutoComplete>
       </div>
 
-      <div className={style['row']}>
-        <div className={style['label']}>Item Code</div>
+      {/* ITEM CODE */}
+      <div className={style['row']} style={rowStyle}>
+        <div className={style['label']} style={{ color: '#6b7280' }}>Item Code</div>
         <div className={style['value']}>{selectedVariant?.code}</div>
       </div>
-      <div className={style['row']}>
-        <div className={style['label']}>Manufacture</div>
+
+      {/* MANUFACTURE */}
+      <div className={style['row']} style={rowStyle}>
+        <div className={style['label']} style={{ color: '#6b7280' }}>Manufacture</div>
         <div className={style['value']}>
           {!!product.manufacture.name ? (
             <Link
@@ -217,29 +218,78 @@ const Information = ({ product }: Props) => {
           )}
         </div>
       </div>
-      <div className={style['row']}>
-        <div className={style['label']}>Berat Barang</div>
+
+      {/* BERAT BARANG */}
+      <div className={style['row']} style={rowStyle}>
+        <div className={style['label']} style={{ color: '#6b7280' }}>Berat Barang</div>
         <div className={style['value']}>
           {selectedVariant?.weight > 0 ? `${selectedVariant?.weight} Kg` : '-'}
         </div>
       </div>
-      <div className={style['row']}>
-        <div className={style['label']}>Terjual</div>
+
+      {/* TERJUAL */}
+      <div className={style['row']} style={{ ...rowStyle, borderBottom: 'none' }}>
+        <div className={style['label']} style={{ color: '#6b7280' }}>Terjual</div>
         <div className={style['value']}>
           {product.qty_sold > 0 ? formatToShortText(product.qty_sold) : '-'}
         </div>
       </div>
-      <div className={style['row']}>
-        <div className={style['label']}>Persiapan Barang</div>
-        {isLoading && (
-          <div className={style['value']}>
-            <Skeleton height={5} width={100} />
-          </div>
-        )}
-        {!isLoading && <div className={style['value']}>{sla?.sla_date}</div>}
+
+      {/* === DETAIL INFORMASI PRODUK (Updated Layout) === */}
+      <div className="mt-6 border-t pt-4">
+        <h2 className="font-bold text-gray-800 text-sm mb-4">Detail Informasi Produk</h2>
+        
+        {/* Perubahan: Spacing diperbesar menjadi 10 agar estimasi bergeser ke kanan */}
+        <SimpleGrid columns={{ base: 1, md: 3 }} spacing={10}>
+            {/* 1. Distributor Resmi */}
+            <Flex align="center" className="gap-3">
+                <img 
+                    src="/images/produk_asli.svg" 
+                    alt="Distributor Resmi" 
+                    className="w-10 h-10 shrink-0" 
+                />
+                <Box>
+                    <Text fontSize="11px" color="gray.500" lineHeight="short" mb="1px">Distributor Resmi</Text>
+                    <Text fontSize="12px" fontWeight="bold" color="gray.800" lineHeight="short">Jaminan Produk Asli</Text>
+                </Box>
+            </Flex>
+
+            {/* 2. Estimasi Penyiapan */}
+            <Flex align="center" className="gap-3">
+                <img 
+                    src="/images/estimasi.svg" 
+                    alt="Estimasi Penyiapan" 
+                    className="w-9 h-9 shrink-0" 
+                />
+                <Box>
+                    <Text fontSize="11px" color="gray.500" lineHeight="short" mb="1px">Estimasi Penyiapan</Text>
+                    {isLoading ? (
+                        <Skeleton height="12px" width="60px" mt="2px" />
+                    ) : (
+                        <Text fontSize="12px" fontWeight="bold" color="gray.800" lineHeight="short">
+                            {sla?.sla_date || '3 - 7 Hari'}
+                        </Text>
+                    )}
+                </Box>
+            </Flex>
+
+            {/* 3. Garansi Produk */}
+            <Flex align="center" className="gap-3">
+                <img 
+                    src="/images/garansi.svg" 
+                    alt="Garansi Produk" 
+                    className="w-10 h-10 shrink-0" 
+                />
+                <Box>
+                    <Text fontSize="11px" color="gray.500" lineHeight="short" mb="1px">Garansi Produk</Text>
+                    <Text fontSize="12px" fontWeight="bold" color="gray.800" lineHeight="short">24 Bulan</Text>
+                </Box>
+            </Flex>
+        </SimpleGrid>
       </div>
+
     </div>
   );
 };
 
-export default Information;
+export default Information;
\ No newline at end of file
-- 
cgit v1.2.3


From 4c9f6b642871f180de70f38e6c05c88c234b7d32 Mon Sep 17 00:00:00 2001
From: FIN-IT_AndriFP <andrifebriyadiputra@gmail.com>
Date: Mon, 5 Jan 2026 11:01:11 +0700
Subject: (andri) add garansi

---
 src-migrate/modules/product-detail/components/Information.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

(limited to 'src-migrate/modules/product-detail/components/Information.tsx')

diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx
index b7d3401e..4d54c03c 100644
--- a/src-migrate/modules/product-detail/components/Information.tsx
+++ b/src-migrate/modules/product-detail/components/Information.tsx
@@ -273,7 +273,7 @@ const Information = ({ product }: Props) => {
                 </Box>
             </Flex>
 
-            {/* 3. Garansi Produk */}
+            {/* 3. Garansi Produk - UPDATED DYNAMIC VALUE */}
             <Flex align="center" className="gap-3">
                 <img 
                     src="/images/garansi.svg" 
@@ -282,7 +282,12 @@ const Information = ({ product }: Props) => {
                 />
                 <Box>
                     <Text fontSize="11px" color="gray.500" lineHeight="short" mb="1px">Garansi Produk</Text>
-                    <Text fontSize="12px" fontWeight="bold" color="gray.800" lineHeight="short">24 Bulan</Text>
+                    <Text fontSize="12px" fontWeight="bold" color="gray.800" lineHeight="short">
+                        {/* Mengambil dari selectedVariant.z_warranty */}
+                        {selectedVariant && (selectedVariant as any).z_warranty 
+                            ? (selectedVariant as any).z_warranty 
+                            : '-'}
+                    </Text>
                 </Box>
             </Flex>
         </SimpleGrid>
-- 
cgit v1.2.3


From c0c09e2d948e04f487641dc0141cc38523fe0b69 Mon Sep 17 00:00:00 2001
From: FIN-IT_AndriFP <andrifebriyadiputra@gmail.com>
Date: Mon, 5 Jan 2026 13:43:48 +0700
Subject: (andri) fix garansi

---
 .../product-detail/components/Information.tsx      | 59 +++++++++++++++++++---
 1 file changed, 51 insertions(+), 8 deletions(-)

(limited to 'src-migrate/modules/product-detail/components/Information.tsx')

diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx
index 4d54c03c..25ca3709 100644
--- a/src-migrate/modules/product-detail/components/Information.tsx
+++ b/src-migrate/modules/product-detail/components/Information.tsx
@@ -9,6 +9,7 @@ import style from '../styles/information.module.css';
 import dynamic from 'next/dynamic';
 import Link from 'next/link';
 import { useEffect, useRef, useState } from 'react';
+import axios from 'axios'; // <--- 1. TAMBAHAN IMPORT AXIOS
 
 import currencyFormat from '@/core/utils/currencyFormat';
 import { InputGroup, InputRightElement, SimpleGrid, Flex, Text, Box } from '@chakra-ui/react';
@@ -44,6 +45,44 @@ const Information = ({ product }: Props) => {
   const variantId = selectedVariant?.id;
   const { slaVariant, isLoading } = useVariant({ variantId });
 
+  const [warranties, setWarranties] = useState<Record<string, string>>({});
+  const [loadingWarranty, setLoadingWarranty] = useState(false);
+
+  useEffect(() => {
+    const fetchWarrantyDirectly = async () => {
+       if (!product?.variants || product.variants.length === 0) return;
+
+       setLoadingWarranty(true);
+       try {
+         // Ambil semua SKU untuk dikirim ke API
+         const skus = product.variants.map((v) => v.id).join(',');
+         const mainSku = product.variants[0].id;
+         console.log("Fetching warranties for SKUs:", skus);
+         console.log("Main SKU:", mainSku);
+
+         // Panggil API magento-product
+         const res = await axios.get('/api/magento-product', {
+             params: { skus, main_sku: mainSku }
+         });
+
+         // Simpan hasil ke state lokal
+         if (res.data && res.data.warranties) {
+             setWarranties(res.data.warranties);
+         }
+         console.log("Warranties API Response:", res);
+         console.log("Warranties fetched:", res.data.warranties);
+       } catch (error) {
+         console.error("Gagal ambil garansi:", error);
+       } finally {
+         setLoadingWarranty(false);
+       }
+    };
+
+    fetchWarrantyDirectly();
+  }, [product]);
+  // ======================================================
+
+
   useEffect(() => {
     if (selectedVariant) {
       setInputValue(
@@ -239,7 +278,6 @@ const Information = ({ product }: Props) => {
       <div className="mt-6 border-t pt-4">
         <h2 className="font-bold text-gray-800 text-sm mb-4">Detail Informasi Produk</h2>
         
-        {/* Perubahan: Spacing diperbesar menjadi 10 agar estimasi bergeser ke kanan */}
         <SimpleGrid columns={{ base: 1, md: 3 }} spacing={10}>
             {/* 1. Distributor Resmi */}
             <Flex align="center" className="gap-3">
@@ -273,7 +311,7 @@ const Information = ({ product }: Props) => {
                 </Box>
             </Flex>
 
-            {/* 3. Garansi Produk - UPDATED DYNAMIC VALUE */}
+            {/* 3. Garansi Produk */}
             <Flex align="center" className="gap-3">
                 <img 
                     src="/images/garansi.svg" 
@@ -282,12 +320,17 @@ const Information = ({ product }: Props) => {
                 />
                 <Box>
                     <Text fontSize="11px" color="gray.500" lineHeight="short" mb="1px">Garansi Produk</Text>
-                    <Text fontSize="12px" fontWeight="bold" color="gray.800" lineHeight="short">
-                        {/* Mengambil dari selectedVariant.z_warranty */}
-                        {selectedVariant && (selectedVariant as any).z_warranty 
-                            ? (selectedVariant as any).z_warranty 
-                            : '-'}
-                    </Text>
+                    
+                    {/* Menggunakan Loading State & Data dari 'warranties' */}
+                    {loadingWarranty ? (
+                         <Skeleton height="12px" width="80px" mt="2px" />
+                    ) : (
+                        <Text fontSize="12px" fontWeight="bold" color="gray.800" lineHeight="short">
+                            {selectedVariant && warranties[selectedVariant.id] 
+                                ? warranties[selectedVariant.id] 
+                                : '-'}
+                        </Text>
+                    )}
                 </Box>
             </Flex>
         </SimpleGrid>
-- 
cgit v1.2.3


From 44afa589c9ced88aa4dcd93181d9e068d79603ea Mon Sep 17 00:00:00 2001
From: FIN-IT_AndriFP <andrifebriyadiputra@gmail.com>
Date: Tue, 6 Jan 2026 11:21:14 +0700
Subject: (andri) fix sort pilih variant

---
 .../product-detail/components/Information.tsx      | 35 +++++++++++-----------
 1 file changed, 18 insertions(+), 17 deletions(-)

(limited to 'src-migrate/modules/product-detail/components/Information.tsx')

diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx
index 25ca3709..c565682f 100644
--- a/src-migrate/modules/product-detail/components/Information.tsx
+++ b/src-migrate/modules/product-detail/components/Information.tsx
@@ -103,23 +103,20 @@ const Information = ({ product }: Props) => {
     }
   }, [slaVariant, isLoading, setSla]);
 
-  const handleOnChange = (vals: any) => {
-    setDisableFilter(true);
-    let code = vals.replace(/\s-\s.*$/, '').trim();
-    let variant = variantOptions.find((item) => item.code === code);
-    setSelectedVariant(variant);
-    setInputValue(
-      variant?.code +
-        (variant?.attributes[0] ? ' - ' + variant?.attributes[0] : '')
-    );
+const handleOnChange = (vals: any) => {
+    setDisableFilter(true);
+    let code = vals.replace(/\s-\s.*$/, '').trim();
+    let variant = product?.variants.find((item) => item.code === code);
+    
     if (variant) {
-      const filteredOptions = product?.variants.filter(
-        (item) => item !== variant
-      );
-      const newOptions = [variant, ...filteredOptions];
-      setVariantOptions(newOptions);
-    }
-  };
+      setSelectedVariant(variant);
+      setInputValue(
+        variant?.code +
+          (variant?.attributes[0] ? ' - ' + variant?.attributes[0] : '')
+      );
+      setVariantOptions(product?.variants); 
+    }
+  };
 
   const handleOnKeyUp = (e: any) => {
     setDisableFilter(false);
@@ -166,7 +163,11 @@ const Information = ({ product }: Props) => {
           </InputGroup>
 
           <AutoCompleteList>
-            {variantOptions.map((option, cid) => (
+            {variantOptions
+              .sort((a: any, b: any) => {
+                return a.code.localeCompare(b.code, undefined, { numeric: true, sensitivity: 'base' });
+              })
+              .map((option, cid) => (
               <AutoCompleteItem
                 key={`option-${cid}`}
                 value={
-- 
cgit v1.2.3


From ab4819716063f4d7eb4578cbcb0d66077145bdab Mon Sep 17 00:00:00 2001
From: FIN-IT_AndriFP <andrifebriyadiputra@gmail.com>
Date: Mon, 12 Jan 2026 13:33:39 +0700
Subject: (andri) fix index table spek & fix view detail information di mobile

---
 .../product-detail/components/Information.tsx      | 88 ++++++++++++----------
 1 file changed, 47 insertions(+), 41 deletions(-)

(limited to 'src-migrate/modules/product-detail/components/Information.tsx')

diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx
index c565682f..e07537fb 100644
--- a/src-migrate/modules/product-detail/components/Information.tsx
+++ b/src-migrate/modules/product-detail/components/Information.tsx
@@ -9,10 +9,10 @@ import style from '../styles/information.module.css';
 import dynamic from 'next/dynamic';
 import Link from 'next/link';
 import { useEffect, useRef, useState } from 'react';
-import axios from 'axios'; // <--- 1. TAMBAHAN IMPORT AXIOS
+import axios from 'axios';
 
 import currencyFormat from '@/core/utils/currencyFormat';
-import { InputGroup, InputRightElement, SimpleGrid, Flex, Text, Box } from '@chakra-ui/react';
+import { InputGroup, InputRightElement, SimpleGrid, Flex, Text, Box, Center } from '@chakra-ui/react';
 import { ChevronDownIcon } from '@heroicons/react/24/outline';
 import Image from 'next/image';
 import { formatToShortText } from '~/libs/formatNumber';
@@ -54,23 +54,16 @@ const Information = ({ product }: Props) => {
 
        setLoadingWarranty(true);
        try {
-         // Ambil semua SKU untuk dikirim ke API
          const skus = product.variants.map((v) => v.id).join(',');
          const mainSku = product.variants[0].id;
-         console.log("Fetching warranties for SKUs:", skus);
-         console.log("Main SKU:", mainSku);
 
-         // Panggil API magento-product
          const res = await axios.get('/api/magento-product', {
              params: { skus, main_sku: mainSku }
          });
 
-         // Simpan hasil ke state lokal
          if (res.data && res.data.warranties) {
              setWarranties(res.data.warranties);
          }
-         console.log("Warranties API Response:", res);
-         console.log("Warranties fetched:", res.data.warranties);
        } catch (error) {
          console.error("Gagal ambil garansi:", error);
        } finally {
@@ -80,8 +73,6 @@ const Information = ({ product }: Props) => {
 
     fetchWarrantyDirectly();
   }, [product]);
-  // ======================================================
-
 
   useEffect(() => {
     if (selectedVariant) {
@@ -103,27 +94,26 @@ const Information = ({ product }: Props) => {
     }
   }, [slaVariant, isLoading, setSla]);
 
-const handleOnChange = (vals: any) => {
-    setDisableFilter(true);
-    let code = vals.replace(/\s-\s.*$/, '').trim();
-    let variant = product?.variants.find((item) => item.code === code);
-    
+  const handleOnChange = (vals: any) => {
+    setDisableFilter(true);
+    let code = vals.replace(/\s-\s.*$/, '').trim();
+    let variant = product?.variants.find((item) => item.code === code);
+    
     if (variant) {
-      setSelectedVariant(variant);
-      setInputValue(
-        variant?.code +
-          (variant?.attributes[0] ? ' - ' + variant?.attributes[0] : '')
-      );
+      setSelectedVariant(variant);
+      setInputValue(
+        variant?.code +
+          (variant?.attributes[0] ? ' - ' + variant?.attributes[0] : '')
+      );
       setVariantOptions(product?.variants); 
-    }
-  };
+    }
+  };
 
   const handleOnKeyUp = (e: any) => {
     setDisableFilter(false);
     setInputValue(e.target.value);
   };
 
-  // STYLE CUSTOM UNTUK BARIS (Item Code, dll)
   const rowStyle = {
     backgroundColor: '#ffffff',
     fontSize: '13px',
@@ -275,37 +265,49 @@ const handleOnChange = (vals: any) => {
         </div>
       </div>
 
-      {/* === DETAIL INFORMASI PRODUK (Updated Layout) === */}
+      {/* === DETAIL INFORMASI PRODUK (Horizontal Minimalis) === */}
       <div className="mt-6 border-t pt-4">
         <h2 className="font-bold text-gray-800 text-sm mb-4">Detail Informasi Produk</h2>
         
-        <SimpleGrid columns={{ base: 1, md: 3 }} spacing={10}>
+        {/* Mobile: 3 Kolom, Spacing Kecil. Desktop: 3 Kolom, Spacing Besar */}
+        <SimpleGrid columns={{ base: 3, md: 3 }} spacing={{ base: 2, md: 10 }}>
+            
             {/* 1. Distributor Resmi */}
-            <Flex align="center" className="gap-3">
+            <Flex 
+              direction={{ base: 'column', md: 'row' }} 
+              align="center" 
+              textAlign={{ base: 'center', md: 'left' }}
+              gap={{ base: 2, md: 3 }}
+            >
                 <img 
                     src="/images/produk_asli.svg" 
                     alt="Distributor Resmi" 
-                    className="w-10 h-10 shrink-0" 
+                    className="w-8 h-8 md:w-10 md:h-10 shrink-0" 
                 />
                 <Box>
-                    <Text fontSize="11px" color="gray.500" lineHeight="short" mb="1px">Distributor Resmi</Text>
-                    <Text fontSize="12px" fontWeight="bold" color="gray.800" lineHeight="short">Jaminan Produk Asli</Text>
+                    <Text fontSize={{ base: "10px", md: "11px" }} color="gray.500" lineHeight="short" mb="1px">Distributor Resmi</Text>
+                    <Text fontSize={{ base: "10px", md: "12px" }} fontWeight="bold" color="gray.800" lineHeight="1.2">Jaminan Produk Asli</Text>
                 </Box>
             </Flex>
 
             {/* 2. Estimasi Penyiapan */}
-            <Flex align="center" className="gap-3">
+            <Flex 
+              direction={{ base: 'column', md: 'row' }} 
+              align="center" 
+              textAlign={{ base: 'center', md: 'left' }}
+              gap={{ base: 2, md: 3 }}
+            >
                 <img 
                     src="/images/estimasi.svg" 
                     alt="Estimasi Penyiapan" 
-                    className="w-9 h-9 shrink-0" 
+                    className="w-8 h-8 md:w-9 md:h-9 shrink-0" 
                 />
                 <Box>
-                    <Text fontSize="11px" color="gray.500" lineHeight="short" mb="1px">Estimasi Penyiapan</Text>
+                    <Text fontSize={{ base: "10px", md: "11px" }} color="gray.500" lineHeight="short" mb="1px">Estimasi Penyiapan</Text>
                     {isLoading ? (
-                        <Skeleton height="12px" width="60px" mt="2px" />
+                        <Center><Skeleton height="10px" width="50px" mt="2px" /></Center>
                     ) : (
-                        <Text fontSize="12px" fontWeight="bold" color="gray.800" lineHeight="short">
+                        <Text fontSize={{ base: "10px", md: "12px" }} fontWeight="bold" color="gray.800" lineHeight="1.2">
                             {sla?.sla_date || '3 - 7 Hari'}
                         </Text>
                     )}
@@ -313,20 +315,24 @@ const handleOnChange = (vals: any) => {
             </Flex>
 
             {/* 3. Garansi Produk */}
-            <Flex align="center" className="gap-3">
+            <Flex 
+              direction={{ base: 'column', md: 'row' }} 
+              align="center" 
+              textAlign={{ base: 'center', md: 'left' }}
+              gap={{ base: 2, md: 3 }}
+            >
                 <img 
                     src="/images/garansi.svg" 
                     alt="Garansi Produk" 
-                    className="w-10 h-10 shrink-0" 
+                    className="w-8 h-8 md:w-10 md:h-10 shrink-0" 
                 />
                 <Box>
-                    <Text fontSize="11px" color="gray.500" lineHeight="short" mb="1px">Garansi Produk</Text>
+                    <Text fontSize={{ base: "10px", md: "11px" }} color="gray.500" lineHeight="short" mb="1px">Garansi Produk</Text>
                     
-                    {/* Menggunakan Loading State & Data dari 'warranties' */}
                     {loadingWarranty ? (
-                         <Skeleton height="12px" width="80px" mt="2px" />
+                         <Center><Skeleton height="10px" width="50px" mt="2px" /></Center>
                     ) : (
-                        <Text fontSize="12px" fontWeight="bold" color="gray.800" lineHeight="short">
+                        <Text fontSize={{ base: "10px", md: "12px" }} fontWeight="bold" color="gray.800" lineHeight="1.2">
                             {selectedVariant && warranties[selectedVariant.id] 
                                 ? warranties[selectedVariant.id] 
                                 : '-'}
-- 
cgit v1.2.3


From 0befdef251386bd026d53721e5cb2173aebd41f2 Mon Sep 17 00:00:00 2001
From: FIN-IT_AndriFP <andrifebriyadiputra@gmail.com>
Date: Mon, 12 Jan 2026 15:28:52 +0700
Subject: (andri) fix detail informasi mobile

---
 src-migrate/modules/product-detail/components/Information.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

(limited to 'src-migrate/modules/product-detail/components/Information.tsx')

diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx
index e07537fb..6e2c930e 100644
--- a/src-migrate/modules/product-detail/components/Information.tsx
+++ b/src-migrate/modules/product-detail/components/Information.tsx
@@ -267,7 +267,9 @@ const Information = ({ product }: Props) => {
 
       {/* === DETAIL INFORMASI PRODUK (Horizontal Minimalis) === */}
       <div className="mt-6 border-t pt-4">
-        <h2 className="font-bold text-gray-800 text-sm mb-4">Detail Informasi Produk</h2>
+        <h2 className="hidden md:block font-bold text-gray-800 text-sm mb-4">
+          Detail Informasi Produk
+        </h2>
         
         {/* Mobile: 3 Kolom, Spacing Kecil. Desktop: 3 Kolom, Spacing Besar */}
         <SimpleGrid columns={{ base: 3, md: 3 }} spacing={{ base: 2, md: 10 }}>
-- 
cgit v1.2.3


From f56cc888934d4b4ef962e967d40533ab5ded2414 Mon Sep 17 00:00:00 2001
From: FIN-IT_AndriFP <andrifebriyadiputra@gmail.com>
Date: Mon, 19 Jan 2026 09:39:25 +0700
Subject: (andri) fix view mobile compare

---
 .../product-detail/components/Information.tsx      | 95 ++++++++++++----------
 1 file changed, 53 insertions(+), 42 deletions(-)

(limited to 'src-migrate/modules/product-detail/components/Information.tsx')

diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx
index 6e2c930e..f3abe0c7 100644
--- a/src-migrate/modules/product-detail/components/Information.tsx
+++ b/src-migrate/modules/product-detail/components/Information.tsx
@@ -12,15 +12,21 @@ import { useEffect, useRef, useState } from 'react';
 import axios from 'axios';
 
 import currencyFormat from '@/core/utils/currencyFormat';
-import { InputGroup, InputRightElement, SimpleGrid, Flex, Text, Box, Center } from '@chakra-ui/react';
+import { InputGroup, InputRightElement, SimpleGrid, Flex, Text, Box, Center, Icon } from '@chakra-ui/react';
 import { ChevronDownIcon } from '@heroicons/react/24/outline';
-import Image from 'next/image';
+import ImageNext from 'next/image';
 import { formatToShortText } from '~/libs/formatNumber';
 import { createSlug } from '~/libs/slug';
 import { IProductDetail } from '~/types/product';
 import { useProductDetail } from '../stores/useProductDetail';
 import useVariant from '../hook/useVariant';
 
+// Import View Components
+import MobileView from '@/core/components/views/MobileView'; // Pastikan path import benar
+
+// Import Modal Compare
+import ProductComparisonModal from './ProductComparisonModal';
+
 const Skeleton = dynamic(() =>
   import('@chakra-ui/react').then((mod) => mod.Skeleton)
 );
@@ -30,8 +36,7 @@ type Props = {
 };
 
 const Information = ({ product }: Props) => {
-  const { selectedVariant, setSelectedVariant, setSla, sla } =
-    useProductDetail();
+  const { selectedVariant, setSelectedVariant, setSla, sla } = useProductDetail();
 
   const [inputValue, setInputValue] = useState<string | null>(
     selectedVariant?.code + ' - ' + selectedVariant?.attributes[0]
@@ -48,6 +53,9 @@ const Information = ({ product }: Props) => {
   const [warranties, setWarranties] = useState<Record<string, string>>({});
   const [loadingWarranty, setLoadingWarranty] = useState(false);
 
+  // State untuk Modal Compare
+  const [isCompareOpen, setIsCompareOpen] = useState(false);
+
   useEffect(() => {
     const fetchWarrantyDirectly = async () => {
        if (!product?.variants || product.variants.length === 0) return;
@@ -166,9 +174,7 @@ const Information = ({ product }: Props) => {
                 }
                 _selected={
                   option.id === selectedVariant?.id
-                    ? {
-                        bg: 'gray.300',
-                      }
+                    ? { bg: 'gray.300' }
                     : undefined
                 }
                 textTransform='capitalize'
@@ -183,13 +189,7 @@ const Information = ({ product }: Props) => {
                         ? ' - ' + option?.attributes[0]
                         : '')}
                   </div>
-                  <div
-                    className={
-                      option?.price?.discount_percentage
-                        ? 'flex gap-x-4 items-center justify-between'
-                        : ''
-                    }
-                  >
+                  <div className={option?.price?.discount_percentage ? 'flex gap-x-4 items-center justify-between' : ''}>
                     {option?.price?.discount_percentage > 0 && (
                       <>
                         <div className='badge-solid-red text-xs'>
@@ -209,6 +209,38 @@ const Information = ({ product }: Props) => {
             ))}
           </AutoCompleteList>
         </AutoComplete>
+
+        {/* === TOMBOL BANDINGKAN PRODUK (HANYA MOBILE) === */}
+        <MobileView>
+            <div 
+                className="flex items-center justify-between py-3 px-4 mt-4 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50 transition-colors group"
+                onClick={() => setIsCompareOpen(true)}
+            >
+                <div className="flex items-center gap-3">
+                    <div className="bg-red-50 p-2 rounded-full group-hover:bg-red-100 transition-colors">
+                        <ImageNext src="/images/logo-bandingkan.svg" width={15} height={15} alt="bandingkan" />
+                    </div>
+                    <div className="flex flex-col">
+                        <span className="text-sm font-bold text-gray-800">Bandingkan Produk</span>
+                        <span className="text-xs text-gray-500">Coba bandingkan dengan produk lainnya</span>
+                    </div>
+                </div>
+                <div className="flex items-center gap-2">
+                    <span className="bg-red-600 text-white text-[10px] font-bold px-2 py-0.5 rounded-full">Baru</span>
+                    <Icon as={ChevronDownIcon} className="w-4 h-4 text-gray-400 transform -rotate-90" />
+                </div>
+            </div>
+        </MobileView>
+
+        {/* Render Modal (Logic open/close ada di dalam component) */}
+        {isCompareOpen && (
+            <ProductComparisonModal 
+                isOpen={isCompareOpen} 
+                onClose={() => setIsCompareOpen(false)} 
+                mainProduct={product}
+                selectedVariant={selectedVariant}
+            />
+        )}
       </div>
 
       {/* ITEM CODE */}
@@ -230,7 +262,7 @@ const Information = ({ product }: Props) => {
               )}
             >
               {product?.manufacture.logo ? (
-                <Image
+                <ImageNext
                   height={50}
                   width={100}
                   src={product.manufacture.logo}
@@ -265,45 +297,33 @@ const Information = ({ product }: Props) => {
         </div>
       </div>
 
-      {/* === DETAIL INFORMASI PRODUK (Horizontal Minimalis) === */}
+      {/* === DETAIL INFORMASI PRODUK === */}
       <div className="mt-6 border-t pt-4">
         <h2 className="hidden md:block font-bold text-gray-800 text-sm mb-4">
           Detail Informasi Produk
         </h2>
         
-        {/* Mobile: 3 Kolom, Spacing Kecil. Desktop: 3 Kolom, Spacing Besar */}
         <SimpleGrid columns={{ base: 3, md: 3 }} spacing={{ base: 2, md: 10 }}>
-            
-            {/* 1. Distributor Resmi */}
             <Flex 
               direction={{ base: 'column', md: 'row' }} 
               align="center" 
               textAlign={{ base: 'center', md: 'left' }}
               gap={{ base: 2, md: 3 }}
             >
-                <img 
-                    src="/images/produk_asli.svg" 
-                    alt="Distributor Resmi" 
-                    className="w-8 h-8 md:w-10 md:h-10 shrink-0" 
-                />
+                <img src="/images/produk_asli.svg" alt="Distributor Resmi" className="w-8 h-8 md:w-10 md:h-10 shrink-0" />
                 <Box>
                     <Text fontSize={{ base: "10px", md: "11px" }} color="gray.500" lineHeight="short" mb="1px">Distributor Resmi</Text>
                     <Text fontSize={{ base: "10px", md: "12px" }} fontWeight="bold" color="gray.800" lineHeight="1.2">Jaminan Produk Asli</Text>
                 </Box>
             </Flex>
 
-            {/* 2. Estimasi Penyiapan */}
             <Flex 
               direction={{ base: 'column', md: 'row' }} 
               align="center" 
               textAlign={{ base: 'center', md: 'left' }}
               gap={{ base: 2, md: 3 }}
             >
-                <img 
-                    src="/images/estimasi.svg" 
-                    alt="Estimasi Penyiapan" 
-                    className="w-8 h-8 md:w-9 md:h-9 shrink-0" 
-                />
+                <img src="/images/estimasi.svg" alt="Estimasi Penyiapan" className="w-8 h-8 md:w-9 md:h-9 shrink-0" />
                 <Box>
                     <Text fontSize={{ base: "10px", md: "11px" }} color="gray.500" lineHeight="short" mb="1px">Estimasi Penyiapan</Text>
                     {isLoading ? (
@@ -316,35 +336,26 @@ const Information = ({ product }: Props) => {
                 </Box>
             </Flex>
 
-            {/* 3. Garansi Produk */}
             <Flex 
               direction={{ base: 'column', md: 'row' }} 
               align="center" 
               textAlign={{ base: 'center', md: 'left' }}
               gap={{ base: 2, md: 3 }}
             >
-                <img 
-                    src="/images/garansi.svg" 
-                    alt="Garansi Produk" 
-                    className="w-8 h-8 md:w-10 md:h-10 shrink-0" 
-                />
+                <img src="/images/garansi.svg" alt="Garansi Produk" className="w-8 h-8 md:w-10 md:h-10 shrink-0" />
                 <Box>
                     <Text fontSize={{ base: "10px", md: "11px" }} color="gray.500" lineHeight="short" mb="1px">Garansi Produk</Text>
-                    
                     {loadingWarranty ? (
-                         <Center><Skeleton height="10px" width="50px" mt="2px" /></Center>
+                          <Center><Skeleton height="10px" width="50px" mt="2px" /></Center>
                     ) : (
                         <Text fontSize={{ base: "10px", md: "12px" }} fontWeight="bold" color="gray.800" lineHeight="1.2">
-                            {selectedVariant && warranties[selectedVariant.id] 
-                                ? warranties[selectedVariant.id] 
-                                : '-'}
+                            {selectedVariant && warranties[selectedVariant.id] ? warranties[selectedVariant.id] : '-'}
                         </Text>
                     )}
                 </Box>
             </Flex>
         </SimpleGrid>
       </div>
-
     </div>
   );
 };
-- 
cgit v1.2.3


From 4217b184369fae3ad52ee8a1f2d7efc4e2829365 Mon Sep 17 00:00:00 2001
From: FIN-IT_AndriFP <andrifebriyadiputra@gmail.com>
Date: Mon, 19 Jan 2026 10:38:43 +0700
Subject: (andri) fix size font specs in compare

---
 src-migrate/modules/product-detail/components/Information.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src-migrate/modules/product-detail/components/Information.tsx')

diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx
index f3abe0c7..6018f6a1 100644
--- a/src-migrate/modules/product-detail/components/Information.tsx
+++ b/src-migrate/modules/product-detail/components/Information.tsx
@@ -330,7 +330,7 @@ const Information = ({ product }: Props) => {
                         <Center><Skeleton height="10px" width="50px" mt="2px" /></Center>
                     ) : (
                         <Text fontSize={{ base: "10px", md: "12px" }} fontWeight="bold" color="gray.800" lineHeight="1.2">
-                            {sla?.sla_date || '3 - 7 Hari'}
+                            {sla?.sla_date || '-'}
                         </Text>
                     )}
                 </Box>
-- 
cgit v1.2.3


From 911c74e00974aaff071bec462981bb8cef901ddb Mon Sep 17 00:00:00 2001
From: FIN-IT_AndriFP <andrifebriyadiputra@gmail.com>
Date: Mon, 19 Jan 2026 16:20:12 +0700
Subject: (andri) fix dynamic view compare desktop

---
 src-migrate/modules/product-detail/components/Information.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src-migrate/modules/product-detail/components/Information.tsx')

diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx
index 6018f6a1..cc16fb6d 100644
--- a/src-migrate/modules/product-detail/components/Information.tsx
+++ b/src-migrate/modules/product-detail/components/Information.tsx
@@ -213,7 +213,7 @@ const Information = ({ product }: Props) => {
         {/* === TOMBOL BANDINGKAN PRODUK (HANYA MOBILE) === */}
         <MobileView>
             <div 
-                className="flex items-center justify-between py-3 px-4 mt-4 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50 transition-colors group"
+                className="w-full flex items-center justify-between py-3 px-1 mt-3 bg-white border-t border-b border-black-100 cursor-pointer hover:bg-gray-50 transition-colors group"
                 onClick={() => setIsCompareOpen(true)}
             >
                 <div className="flex items-center gap-3">
-- 
cgit v1.2.3


From d74edefd0226cb192be55cad005378ca7ca084a6 Mon Sep 17 00:00:00 2001
From: FIN-IT_AndriFP <andrifebriyadiputra@gmail.com>
Date: Fri, 30 Jan 2026 09:52:57 +0700
Subject: fix dropdown variant information

---
 src-migrate/modules/product-detail/components/Information.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

(limited to 'src-migrate/modules/product-detail/components/Information.tsx')

diff --git a/src-migrate/modules/product-detail/components/Information.tsx b/src-migrate/modules/product-detail/components/Information.tsx
index 900225a5..ce848267 100644
--- a/src-migrate/modules/product-detail/components/Information.tsx
+++ b/src-migrate/modules/product-detail/components/Information.tsx
@@ -178,7 +178,10 @@ const Information = ({ product }: Props) => {
               .map((option, cid) => (
               <AutoCompleteItem
                 key={option.id}
-                value={String(option.id)}
+                // value={String(option.id)}
+                value={option.code +
+                  (option.attributes?.[0] ? ` - ${option.attributes[0]}` : '')
+                }
                 _selected={
                   option.id === selectedVariant?.id
                     ? { bg: 'gray.300' }
-- 
cgit v1.2.3

