From b45835a01655b67f52ebd933f3d2c07d803f6aaf Mon Sep 17 00:00:00 2001
From: FIN-IT_AndriFP <andrifebriyadiputra@gmail.com>
Date: Fri, 9 Jan 2026 10:33:14 +0700
Subject: (andri) ganti sticky variant kolom pertama menjadi attribute code
 pertama dari magento

---
 .../product-detail/components/ProductDetail.tsx    | 58 ++++++++++------------
 1 file changed, 25 insertions(+), 33 deletions(-)

(limited to 'src-migrate')

diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx
index 387a7e5f..983cb843 100644
--- a/src-migrate/modules/product-detail/components/ProductDetail.tsx
+++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx
@@ -567,27 +567,20 @@ const ProductDetail = ({ product }: Props) => {
                           return (
                             <Table variant="simple" size="md">
                               <Thead bg="red.600" position="sticky" top={0} zIndex={20}>
+                                {/* Baris 1: Header Utama */}
                                 <Tr>
-                                  <Th 
-                                    position="sticky" left={0} top={0} zIndex={21} bg="red.600"
-                                    rowSpan={2}
-                                    width="25%" 
-                                    minW="100px" 
-                                    borderColor="whiteAlpha.300" color="white" 
-                                    fontSize="sm" textTransform="none" verticalAlign="middle"
-                                    textAlign="center"
-                                    boxShadow="2px 0 5px -2px rgba(0,0,0,0.1)"
-                                  >
-                                    Variant
-                                  </Th>
-
                                   {topHeaders.map((th, idx) => (
                                     <Th 
                                       key={`top-${idx}`}
-                                      position="sticky" top={0} zIndex={20} bg="red.600" 
+                                      // STICKY HEADER BARIS 1 
+                                      position={idx === 0 ? "sticky" : "static"}
+                                      left={idx === 0 ? 0 : undefined}
+                                      zIndex={idx === 0 ? 22 : 20} 
+                                      boxShadow={idx === 0 ? "2px 0 5px -2px rgba(0,0,0,0.2)" : "none"}
+                                      
+                                      bg="red.600" 
                                       colSpan={th.colSpan}
                                       rowSpan={th.rowSpan}
-                                      // borderColor="whiteAlpha.300" 
                                       color="white" 
                                       textAlign="center" 
                                       fontSize="sm" 
@@ -600,11 +593,16 @@ const ProductDetail = ({ product }: Props) => {
                                     </Th>
                                   ))}
                                 </Tr>
+
+                                {/* Baris 2: Sub Header */}
                                 <Tr>
                                   {subHeaders.map((sub, idx) => (
                                     <Th 
                                       key={`sub-${idx}`}
-                                      // borderColor="whiteAlpha.300" 
+                                      position={idx === 0 ? "sticky" : "static"}
+                                      left={idx === 0 ? 0 : undefined}
+                                      zIndex={idx === 0 ? 21 : 1} 
+                                      boxShadow={idx === 0 ? "2px 0 5px -2px rgba(0,0,0,0.2)" : "none"}
                                       color="white" 
                                       textAlign="center" 
                                       fontSize="xs"
@@ -621,39 +619,33 @@ const ProductDetail = ({ product }: Props) => {
                               </Thead>
                               
                               <Tbody>
-                                {/* MENGGUNAKAN sortedVariants HASIL REVISI */}
                                 {sortedVariants.map((v, vIdx) => (
                                   <Tr key={v.id} bg={vIdx % 2 === 0 ? 'white' : 'gray.50'}>
-                                    {/* 1. KOLOM JUDUL VARIANT (Sticky Kiri) */}
-                                    <Td 
-                                      position="sticky" left={0} zIndex={15} 
-                                      bg={vIdx % 2 === 0 ? 'white' : 'gray.50'}
-                                      fontWeight="bold" borderColor="gray.200" fontSize="sm" 
-                                      verticalAlign="middle"
-                                      boxShadow="2px 0 5px -2px rgba(0,0,0,0.05)"
-                                      minW="100px"         
-                                      textAlign="center"
-                                      whiteSpace="normal" 
-                                      py={4}               
-                                    >
-                                      {v.attributes && v.attributes.length > 0 ? v.attributes.join(' - ') : v.code}
-                                    </Td>
-                                    {/* 2. KOLOM DATA SPESIFIKASI */}
                                     {flatSpecs.map((spec, sIdx) => {
                                       const rawValue = spec.values[v.id] || '-';
+                                      const isFirstCol = sIdx === 0; 
                                       return (
                                         <Td 
                                           key={sIdx} 
+                                          // === LOGIC STICKY DATA PERTAMA ===
+                                          position={isFirstCol ? "sticky" : "static"}
+                                          left={isFirstCol ? 0 : undefined}
+                                          zIndex={isFirstCol ? 10 : 1}
+                                          bg={vIdx % 2 === 0 ? 'white' : 'gray.50'} 
+                                          boxShadow={isFirstCol ? "2px 0 5px -2px rgba(0,0,0,0.1)" : "none"}
+                                          // =================================
+                                          
                                           borderColor="gray.200" 
                                           textAlign="center" 
                                           fontSize="sm" 
                                           verticalAlign="middle"
                                           px={2}
                                           py={3} 
-                                          minW="100px"   
+                                          minW="100px"
                                           maxW="150px"        
                                           whiteSpace="normal" 
                                           overflowWrap="break-word"
+                                          fontWeight={isFirstCol ? "bold" : "normal"} 
                                         >
                                           {renderSpecValue(rawValue)}
                                         </Td>
-- 
cgit v1.2.3