From fbbff6a25ed39b721927a79ce905f4d1e06e522b Mon Sep 17 00:00:00 2001
From: FIN-IT_AndriFP <andrifebriyadiputra@gmail.com>
Date: Tue, 23 Dec 2025 14:44:11 +0700
Subject: (andri) fix sticky kolom pertama specs

---
 .../product-detail/components/ProductDetail.tsx    | 198 ++++++++++++---------
 1 file changed, 118 insertions(+), 80 deletions(-)

diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx
index 3beb75b4..1c9c39e0 100644
--- a/src-migrate/modules/product-detail/components/ProductDetail.tsx
+++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx
@@ -460,88 +460,126 @@ const ProductDetail = ({ product }: Props) => {
                     </div>
                   </TabPanel>
 
-                  {/* SPESIFIKASI (LOGIKA GROUPING + RATA TENGAH) */}
+                  {/* SPESIFIKASI (LOGIKA GROUPING + RATA TENGAH + STICKY FIRST COLUMN) */}
                   <TabPanel px={0} py={2}>
                     <Box border="1px solid" borderColor="gray.200" borderRadius="sm" overflowX="auto">
-                        {loadingSpecs ? (
-                            <Center py={6}><Spinner color='red.500' /></Center>
-                        ) : specsMatrix.length > 0 ? (
-                            (() => {
-                                const isSingleVariant = product.variants.length === 1;
-                                const globalAlign = isSingleVariant ? "left" : "center";
-                                
-                                return (
-                                    <Table variant="simple" size="md">
-                                        <Thead bg="red.600">
-                                            <Tr>
-                                                <Th width={isSingleVariant ? "30%" : "20%"} borderColor="whiteAlpha.300" color="white" fontSize="sm" textTransform="none" verticalAlign="middle">
-                                                    Spesifikasi
-                                                </Th>
-                                                {product.variants.map(v => (
-                                                    <Th key={v.id} borderColor="whiteAlpha.300" color="white" textAlign={globalAlign} fontSize="sm" textTransform="none" verticalAlign="middle">
-                                                        {isSingleVariant ? 'Detail' : (v.attributes && v.attributes.length > 0 ? v.attributes.join(' - ') : v.code)}
-                                                    </Th>
-                                                ))}
-                                            </Tr>
-                                        </Thead>
-                                        <Tbody>
-                                            {specsMatrix.map((row, i) => {
-                                                
-                                                // CASE 1: GROUPING (Label punya ' : ')
-                                                if (row.type === 'group') {
-                                                    return (
-                                                        <Tr key={i}>
-                                                            {/* Header Group Kiri */}
-                                                            <Td fontWeight="bold" borderColor="gray.200" fontSize="sm" verticalAlign="middle">{row.label}</Td>
-                                                            
-                                                            {/* Content Group Kanan */}
-                                                            {product.variants.map(v => (
-                                                                <Td key={v.id} borderColor="gray.200" textAlign={globalAlign} fontSize="sm" verticalAlign="middle">
-                                                                    <div className={`inline-block text-left`}>
-                                                                        <div className="flex flex-col gap-0">
-                                                                            {row.children.map((child: any, idx: number) => {
-                                                                                const rawVal = child.values[v.id];
-                                                                                if (!rawVal || rawVal === '-') return null;
-                                                                                
-                                                                                return (
-                                                                                    <div key={idx} className="grid grid-cols-[auto_auto] gap-x-2">
-                                                                                        <span className="font-semibold text-gray-600 whitespace-nowrap">
-                                                                                            {child.label}:
-                                                                                        </span>
-                                                                                        <span>{renderSpecValue(rawVal)}</span>
-                                                                                    </div>
-                                                                                );
-                                                                            })}
-                                                                        </div>
-                                                                    </div>
-                                                                </Td>
-                                                            ))}
-                                                        </Tr>
-                                                    );
-                                                }
-
-                                                // CASE 2: SINGLE ITEM
-                                                return (
-                                                    <Tr key={i}>
-                                                        <Td fontWeight="bold" borderColor="gray.200" fontSize="sm" verticalAlign="middle">{row.label}</Td>
-                                                        {product.variants.map(v => {
-                                                            const rawValue = row.values[v.id] || '-';
-                                                            return (
-                                                                <Td key={v.id} borderColor="gray.200" textAlign={globalAlign} fontSize="sm" verticalAlign="middle">
-                                                                    {renderSpecValue(rawValue)}
-                                                                </Td>
-                                                            );
-                                                        })}
-                                                    </Tr>
-                                                );
-                                            })}
-                                        </Tbody>
-                                    </Table>
-                                );
-                            })()
-                        ) : (
-                            <Box p={4} color="gray.500" fontSize="sm"><Text>Spesifikasi teknis belum tersedia.</Text></Box>
-                        )}
+                      {loadingSpecs ? (
+                        <Center py={6}><Spinner color='red.500' /></Center>
+                      ) : specsMatrix.length > 0 ? (
+                        (() => {
+                          const isSingleVariant = product.variants.length === 1;
+                          const globalAlign = isSingleVariant ? "left" : "center";
+
+                          return (
+                            <Table variant="simple" size="md">
+                              <Thead bg="red.600">
+                                <Tr>
+                                  {/* 1. STICKY HEADER KOLOM PERTAMA */}
+                                  <Th 
+                                      position="sticky" 
+                                      left={0} 
+                                      zIndex={10} 
+                                      bg="red.600"
+                                      width={isSingleVariant ? "30%" : "20%"} 
+                                      borderColor="whiteAlpha.300" 
+                                      color="white" 
+                                      fontSize="sm" 
+                                      textTransform="none" 
+                                      verticalAlign="middle"
+                                      boxShadow="2px 0 5px -2px rgba(0,0,0,0.1)" // Optional: bayangan tipis pembatas
+                                  >
+                                    Spesifikasi
+                                  </Th>
+                                  {product.variants.map(v => (
+                                    <Th key={v.id} borderColor="whiteAlpha.300" color="white" textAlign={globalAlign} fontSize="sm" textTransform="none" verticalAlign="middle">
+                                      {isSingleVariant ? 'Detail' : (v.attributes && v.attributes.length > 0 ? v.attributes.join(' - ') : v.code)}
+                                    </Th>
+                                  ))}
+                                </Tr>
+                              </Thead>
+                              <Tbody>
+                                {specsMatrix.map((row, i) => {
+
+                                  // CASE 1: GROUPING
+                                  if (row.type === 'group') {
+                                    return (
+                                      <Tr key={i}>
+                                        {/* 2. STICKY BODY KOLOM PERTAMA (GROUP) */}
+                                        <Td 
+                                          position="sticky" 
+                                          left={0} 
+                                          zIndex={5} 
+                                          bg="white"
+                                          fontWeight="bold" 
+                                          borderColor="gray.200" 
+                                          fontSize="sm" 
+                                          verticalAlign="middle"
+                                          boxShadow="2px 0 5px -2px rgba(0,0,0,0.05)"
+                                        >
+                                          {row.label}
+                                        </Td>
+
+                                        {product.variants.map(v => (
+                                          <Td key={v.id} borderColor="gray.200" textAlign={globalAlign} fontSize="sm" verticalAlign="middle">
+                                            <div className={`inline-block text-left`}>
+                                              <div className="flex flex-col gap-0">
+                                                {row.children.map((child: any, idx: number) => {
+                                                  const rawVal = child.values[v.id];
+                                                  if (!rawVal || rawVal === '-') return null;
+
+                                                  return (
+                                                    <div key={idx} className="grid grid-cols-[auto_auto] gap-x-2">
+                                                      <span className="font-semibold text-gray-600 whitespace-nowrap">
+                                                        {child.label}:
+                                                      </span>
+                                                      <span>{renderSpecValue(rawVal)}</span>
+                                                    </div>
+                                                  );
+                                                })}
+                                              </div>
+                                            </div>
+                                          </Td>
+                                        ))}
+                                      </Tr>
+                                    );
+                                  }
+
+                                  // CASE 2: SINGLE ITEM
+                                  return (
+                                    <Tr key={i}>
+                                      {/* 3. STICKY BODY KOLOM PERTAMA (SINGLE) */}
+                                      <Td 
+                                          position="sticky" 
+                                          left={0} 
+                                          zIndex={5} 
+                                          bg="white"
+                                          fontWeight="bold" 
+                                          borderColor="gray.200" 
+                                          fontSize="sm" 
+                                          verticalAlign="middle"
+                                          boxShadow="2px 0 5px -2px rgba(0,0,0,0.05)"
+                                      >
+                                          {row.label}
+                                      </Td>
+                                      
+                                      {product.variants.map(v => {
+                                        const rawValue = row.values[v.id] || '-';
+                                        return (
+                                          <Td key={v.id} borderColor="gray.200" textAlign={globalAlign} fontSize="sm" verticalAlign="middle">
+                                            {renderSpecValue(rawValue)}
+                                          </Td>
+                                        );
+                                      })}
+                                    </Tr>
+                                  );
+                                })}
+                              </Tbody>
+                            </Table>
+                          );
+                        })()
+                      ) : (
+                        <Box p={4} color="gray.500" fontSize="sm"><Text>Spesifikasi teknis belum tersedia.</Text></Box>
+                      )}
                     </Box>
                   </TabPanel>
                   
-- 
cgit v1.2.3