summaryrefslogtreecommitdiff
path: root/src-migrate/modules/product-detail/components/ProductDetail.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src-migrate/modules/product-detail/components/ProductDetail.tsx')
-rw-r--r--src-migrate/modules/product-detail/components/ProductDetail.tsx178
1 files changed, 116 insertions, 62 deletions
diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx
index dcd97ef1..54a0fb52 100644
--- a/src-migrate/modules/product-detail/components/ProductDetail.tsx
+++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx
@@ -2,7 +2,6 @@ import style from '../styles/product-detail.module.css';
import Link from 'next/link';
import { useRouter } from 'next/router';
-// Import useMemo
import { useEffect, useRef, useState, UIEvent, useMemo } from 'react';
// Import komponen Chakra UI
@@ -64,6 +63,41 @@ const RWebShare = dynamic(
{ ssr: false }
);
+// 1. STYLE DESKTOP (Tebal, Jelas, dengan Border/Padding)
+const cssScrollbarDesktop = {
+ '&::-webkit-scrollbar': {
+ width: '10px',
+ height: '10px',
+ },
+ '&::-webkit-scrollbar-track': {
+ background: '#f1f1f1',
+ borderRadius: '4px',
+ },
+ '&::-webkit-scrollbar-thumb': {
+ backgroundColor: '#9ca3af', // Gray-400
+ borderRadius: '6px',
+ border: '2px solid #f1f1f1', // Efek padding
+ },
+ '&::-webkit-scrollbar-thumb:hover': {
+ backgroundColor: '#6b7280',
+ },
+};
+
+// 2. STYLE MOBILE (Tipis, Minimalis, Tanpa Border)
+const cssScrollbarMobile = {
+ '&::-webkit-scrollbar': {
+ width: '3px', // Sangat tipis vertikal
+ height: '3px', // Sangat tipis horizontal
+ },
+ '&::-webkit-scrollbar-track': {
+ background: 'transparent',
+ },
+ '&::-webkit-scrollbar-thumb': {
+ backgroundColor: '#cbd5e1', // Gray-300
+ borderRadius: '3px',
+ },
+};
+
const SELF_HOST = process.env.NEXT_PUBLIC_SELF_HOST;
const ProductDetail = ({ product }: Props) => {
@@ -178,13 +212,14 @@ const ProductDetail = ({ product }: Props) => {
// 1. Specs Matrix (Processed Grouping)
if (data.specsMatrix && Array.isArray(data.specsMatrix)) {
- const filteredMatrix = data.specsMatrix.filter((item: any) => {
- const code = item.code || '';
- return !code.includes('z_brand');
- });
-
- const processed = processMatrixData(filteredMatrix);
+ // const filteredMatrix = data.specsMatrix.filter((item: any) => {
+ // const code = item.code || '';
+ // return !code.includes('z_brand');
+ // });
+ const processed = processMatrixData(data.specsMatrix);
setSpecsMatrix(processed);
+ // const processed = processMatrixData(filteredMatrix);
+ // setSpecsMatrix(processed);
} else {
setSpecsMatrix([]);
}
@@ -213,14 +248,13 @@ const ProductDetail = ({ product }: Props) => {
}, [product.id]);
// =========================================================================
- // HELPER 1: GROUPING DATA BY LABEL (Separator ':')
+ // HELPER 1: GROUPING DATA BY LABEL
// =========================================================================
const processMatrixData = (rawMatrix: any[]) => {
const groups: any = {};
const result: any[] = [];
rawMatrix.forEach(item => {
- // Cek Label: "Group Name : Sub Label"
if (item.label && item.label.includes(' : ')) {
const parts = item.label.split(' : ');
const groupName = parts[0].trim();
@@ -237,7 +271,7 @@ const ProductDetail = ({ product }: Props) => {
groups[groupName].children.push({
...item,
- label: childLabel // Override label jadi pendek
+ label: childLabel
});
} else {
@@ -256,7 +290,6 @@ const ProductDetail = ({ product }: Props) => {
if (!val) return '-';
const strVal = String(val).trim();
- // URL Link
const isUrl = !strVal.includes(' ') && (
strVal.startsWith('http') ||
strVal.startsWith('www.')
@@ -275,7 +308,6 @@ const ProductDetail = ({ product }: Props) => {
);
}
- // HTML
if (strVal.includes('<') && strVal.includes('>')) {
return (
<div
@@ -285,7 +317,6 @@ const ProductDetail = ({ product }: Props) => {
);
}
- // Teks Biasa
return strVal;
};
@@ -496,19 +527,19 @@ const ProductDetail = ({ product }: Props) => {
<h1 className={style['title']}>{product.name}</h1>
<div className='h-3 md:h-0' />
<Information product={product} />
- <div className='h-6' />
+ <div className='h-2' />
</div>
)}
</div>
<div className='h-full'>
{isMobile && (
- <div className='px-4 pt-6'>
+ <div className='px-4 pt-2'>
<PriceAction product={product} />
</div>
)}
- <div className='h-4 md:h-10' />
+ <div className='h-2 md:h-10' />
{!!activeVariantId && !isApproval && (
<ProductPromoSection
product={product}
@@ -559,29 +590,61 @@ const ProductDetail = ({ product }: Props) => {
overflowX="auto"
overflowY="auto"
maxHeight="500px"
- css={{
- '&::-webkit-scrollbar': {
- width: '12px',
- height: '12px',
- },
- '&::-webkit-scrollbar-track': {
- background: '#f1f1f1',
- },
- '&::-webkit-scrollbar-thumb': {
- backgroundColor: '#a0aec0',
- borderRadius: '8px',
- border: '4px solid transparent',
- backgroundClip: 'content-box',
- },
- '&::-webkit-scrollbar-thumb:hover': {
- backgroundColor: '#718096',
- },
- }}
+ css={isMobile ? cssScrollbarMobile : cssScrollbarDesktop}
>
{loadingSpecs ? (
<Center py={6}><Spinner color='red.500' /></Center>
) : specsMatrix.length > 0 ? (
(() => {
+ const variantCount = sortedVariants.length;
+ const isSingleVariant = variantCount === 1;
+
+ // === LOGIC 1: SINGLE VARIANT (VERTICAL TABLE) ===
+ if (isSingleVariant) {
+ const singleVariantId = sortedVariants[0].id;
+ // Flatten data untuk list vertical
+ const rows: any[] = [];
+ specsMatrix.forEach(row => {
+ if (row.type === 'group') {
+ row.children.forEach((child: any) => rows.push(child));
+ } else {
+ rows.push(row);
+ }
+ });
+
+ return (
+ <Table variant="simple" size={isMobile ? "sm" : "md"}>
+ <Tbody>
+ {rows.map((row, idx) => (
+ <Tr key={idx} bg={idx % 2 === 0 ? 'white' : 'gray.50'}>
+ {/* Kolom Label (Kiri) */}
+ <Td
+ width="40%"
+ fontWeight="bold"
+ color="gray.600"
+ borderColor="gray.200"
+ verticalAlign="top"
+ py={3}
+ >
+ {row.label}
+ </Td>
+ {/* Kolom Value (Kanan) */}
+ <Td
+ color="gray.800"
+ borderColor="gray.200"
+ verticalAlign="top"
+ py={3}
+ >
+ {renderSpecValue(row.values[singleVariantId])}
+ </Td>
+ </Tr>
+ ))}
+ </Tbody>
+ </Table>
+ );
+ }
+
+ // === LOGIC 2: MULTIPLE VARIANTS (MATRIX TABLE HORIZONTAL) ===
const topHeaders: any[] = [];
const subHeaders: any[] = [];
const flatSpecs: any[] = [];
@@ -610,48 +673,44 @@ const ProductDetail = ({ product }: Props) => {
});
return (
- <Table variant="simple" size="md">
- <Thead bg="red.600" position="sticky" top={0} zIndex={20}>
- {/* Baris 1: Header Utama */}
+ <Table variant="simple" size={isMobile ? "sm" : "md"}>
+ <Thead bg="red.600" position="sticky" top={0} zIndex={3}>
<Tr>
{topHeaders.map((th, idx) => (
<Th
key={`top-${idx}`}
position={idx === 0 ? "sticky" : "static"}
left={idx === 0 ? 0 : undefined}
- zIndex={idx === 0 ? 22 : 20}
+ zIndex={idx === 0 ? 4 : 3}
boxShadow={idx === 0 ? "2px 0 5px -2px rgba(0,0,0,0.2)" : "none"}
-
bg="red.600"
colSpan={th.colSpan}
rowSpan={th.rowSpan}
color="white"
textAlign="center"
- fontSize="sm"
+ fontSize={isMobile ? "xs" : "sm"}
textTransform="none"
fontWeight="800"
letterSpacing="wide"
verticalAlign="middle"
borderBottom="none"
+ px={isMobile ? 2 : 4}
>
{th.label}
</Th>
))}
</Tr>
-
- {/* Baris 2: Sub Header */}
<Tr>
- {subHeaders.map((sub, idx) => {
- const isFirstHeaderGroup = topHeaders[0]?.type === 'group';
- const shouldSticky = idx === 0 && isFirstHeaderGroup;
- return (
+ {subHeaders.map((sub, idx) => {
+ const isFirstHeaderGroup = topHeaders[0]?.type === 'group';
+ const shouldSticky = idx === 0 && isFirstHeaderGroup;
+ return (
<Th
key={`sub-${idx}`}
position={shouldSticky ? "sticky" : "static"}
left={shouldSticky ? 0 : undefined}
- zIndex={shouldSticky ? 21 : 1}
+ zIndex={shouldSticky ? 4 : 1}
boxShadow={shouldSticky ? "2px 0 5px -2px rgba(0,0,0,0.2)" : "none"}
-
color="white"
textAlign="center"
fontSize="xs"
@@ -660,6 +719,7 @@ const ProductDetail = ({ product }: Props) => {
whiteSpace="nowrap"
bg="red.600"
pt={1} pb={1}
+ px={isMobile ? 2 : 4}
>
{sub.label}
</Th>
@@ -667,35 +727,32 @@ const ProductDetail = ({ product }: Props) => {
})}
</Tr>
</Thead>
-
+
<Tbody>
{sortedVariants.map((v, vIdx) => (
<Tr key={v.id} bg={vIdx % 2 === 0 ? 'white' : 'gray.50'}>
{flatSpecs.map((spec, sIdx) => {
const rawValue = spec.values[v.id] || '-';
- const isFirstCol = sIdx === 0;
+ const isFirstCol = sIdx === 0;
return (
<Td
key={sIdx}
- // === LOGIC STICKY DATA PERTAMA ===
position={isFirstCol ? "sticky" : "static"}
left={isFirstCol ? 0 : undefined}
- zIndex={isFirstCol ? 10 : 1}
+ zIndex={isFirstCol ? 2 : 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"
+ fontSize={isMobile ? "xs" : "sm"}
verticalAlign="middle"
- px={2}
+ px={isMobile ? 1 : 2}
py={3}
- minW="100px"
- maxW="150px"
+ minW={isMobile ? "100px" : "120px"}
+ maxW="200px"
whiteSpace="normal"
overflowWrap="break-word"
- fontWeight={isFirstCol ? "bold" : "normal"}
+ fontWeight={isFirstCol ? "bold" : "normal"}
>
{renderSpecValue(rawValue)}
</Td>
@@ -712,9 +769,6 @@ const ProductDetail = ({ product }: Props) => {
)}
</Box>
</TabPanel>
-
- {/* DETAIL LAINNYA */}
- <TabPanel px={0} py={6}><p className="text-gray-500 text-sm">Informasi tambahan belum tersedia.</p></TabPanel>
</TabPanels>
</Tabs>
</div>
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-17 17:29:22 +0000