diff options
| -rw-r--r-- | src-migrate/modules/product-detail/components/ProductDetail.tsx | 198 |
1 files 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> |