(andri) view from magento

1 files changed, 103 insertions, 24 deletions

diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx
index e4ba2b2f..1bacd2e2 100644
--- a/src-migrate/modules/product-detail/components/ProductDetail.tsx
+++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx
@@ -4,9 +4,22 @@ import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useEffect, useRef, useState, UIEvent } from 'react';
 
-import { Button } from '@chakra-ui/react';
+// Import komponen Chakra UI yang dibutuhkan
+import { 
+  Button, 
+  Tabs, 
+  TabList, 
+  TabPanels, 
+  Tab, 
+  TabPanel, 
+  Table, 
+  Tbody, 
+  Tr, 
+  Td,
+  Box
+} from '@chakra-ui/react';
+
 import {
-  AlertCircle,
   AlertTriangle,
   MessageCircleIcon,
   Share2Icon,
@@ -62,7 +75,6 @@ const ProductDetail = ({ product }: Props) => {
     setIsApproval,
     isApproval,
     setSelectedVariant,
-    setSla,
   } = useProductDetail();
 
   useEffect(() => {
@@ -136,11 +148,15 @@ const ProductDetail = ({ product }: Props) => {
   const scrollToIndex = (i: number) => {
     const el = sliderRef.current;
     if (!el) return;
-    el.scrollTo({ left: i * el.clientWidth, behavior: 'smooth' });
+    const elRef = sliderRef.current;
+    elRef.scrollTo({ left: i * elRef.clientWidth, behavior: 'smooth' });
     setCurrentIdx(i);
     setMainImage(allImages[i] || '');
   };
 
+  console.log('detail product render');
+  console.log('product: ', product);
+
   return (
     <>
       <div className='relative'>
@@ -195,7 +211,6 @@ const ProductDetail = ({ product }: Props) => {
                           key={i}
                           className='w-full flex-shrink-0 snap-center flex justify-center items-center'
                         >
-                          {/* gambar diperkecil */}
                           <img
                             src={img}
                             alt={`Gambar ${i + 1}`}
@@ -218,7 +233,6 @@ const ProductDetail = ({ product }: Props) => {
                     )}
                   </div>
 
-                  {/* Dots indicator */}
                   {allImages.length > 1 && (
                     <div className='absolute bottom-2 left-0 right-0 flex justify-center gap-2'>
                       {allImages.map((_, i) => (
@@ -238,8 +252,6 @@ const ProductDetail = ({ product }: Props) => {
                 <>
                   {/* === DESKTOP: Tetap seperti sebelumnya === */}
                   <ProductImage product={{ ...product, image: mainImage }} />
-
-                  {/* Carousel horizontal (thumbnail) – hanya desktop */}
                   {allImages.length > 0 && (
                     <div className='mt-4 overflow-x-auto'>
                       <div className='flex space-x-3 pb-3'>
@@ -271,7 +283,6 @@ const ProductDetail = ({ product }: Props) => {
                 </>
               )}
             </div>
-            {/* <<=== TUTUP kolom kiri */}
 
             {/* ===== Kolom kanan: info ===== */}
             {isDesktop && (
@@ -332,21 +343,89 @@ const ProductDetail = ({ product }: Props) => {
 
             <div className='h-0 md:h-6' />
 
+            {/* === SECTION TABS: DESKRIPSI & SPESIFIKASI === */}
             <div className={style['section-card']}>
-              <h2 className={style['heading']}>Informasi Produk</h2>
-              <div className='h-4' />
-              <div className='overflow-x-auto'>
-                <div
-                  className={style['description']}
-                  dangerouslySetInnerHTML={{
-                    __html:
-                      !product.description ||
-                      product.description == '<p><br></p>'
-                        ? 'Belum ada deskripsi'
-                        : product.description,
-                  }}
-                />
-              </div>
+              <Tabs variant="unstyled">
+                {/* Header Tabs */}
+                <TabList borderBottom="1px solid" borderColor="gray.200">
+                  <Tab 
+                    _selected={{ 
+                      color: 'red.600', 
+                      borderColor: 'red.600', 
+                      borderBottomWidth: '3px', 
+                      fontWeight: 'bold',
+                      marginBottom: '-1.5px' 
+                    }}
+                    color="gray.500"
+                    fontWeight="medium"
+                    fontSize="sm"
+                    px={4}
+                    py={3}
+                  >
+                    Deskripsi
+                  </Tab>
+                  <Tab 
+                    _selected={{ 
+                      color: 'red.600', 
+                      borderColor: 'red.600', 
+                      borderBottomWidth: '3px', 
+                      fontWeight: 'bold',
+                      marginBottom: '-1.5px' 
+                    }}
+                    color="gray.500"
+                    fontWeight="medium"
+                    fontSize="sm"
+                    px={4}
+                    py={3}
+                  >
+                    Spesifikasi
+                  </Tab>
+                  <Tab 
+                    _selected={{ 
+                      color: 'red.600', 
+                      borderColor: 'red.600', 
+                      borderBottomWidth: '3px', 
+                      fontWeight: 'bold',
+                      marginBottom: '-1.5px' 
+                    }}
+                    color="gray.500"
+                    fontWeight="medium"
+                    fontSize="sm"
+                    px={4}
+                    py={3}
+                  >
+                    Detail Lainnya
+                  </Tab>
+                </TabList>
+
+                <TabPanels>
+                  {/* PANEL 1: DESKRIPSI */}
+                  <TabPanel px={0} py={6}>
+                    <div className='overflow-x-auto text-sm text-gray-700'>
+                      <div
+                        className={style['description']}
+                        dangerouslySetInnerHTML={{
+                          __html:
+                            !product.description || product.description === '<p><br></p>'
+                              ? '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>'
+                              : product.description,
+                        }}
+                      />
+                    </div>
+                  </TabPanel>
+
+                  {/* PANEL 2: SPESIFIKASI (Sesuai Gambar) */}
+                  <TabPanel px={0} py={6}>
+                      <p className="text-gray-500 text-sm">Informasi tambahan belum tersedia.</p>
+                  </TabPanel>
+                  
+                   {/* PANEL 3: DETAIL LAINNYA */}
+                   <TabPanel px={0} py={6}>
+                        <p className="text-gray-500 text-sm">Informasi tambahan belum tersedia.</p>
+                   </TabPanel>
+
+                </TabPanels>
+              </Tabs>
             </div>
           </div>
         </div>
@@ -422,4 +501,4 @@ const ProductDetail = ({ product }: Props) => {
   );
 };
 
-export default ProductDetail;
+export default ProductDetail;
\ No newline at end of file