From 581761398f83b9d177236a697ddb4c4355a3af9e Mon Sep 17 00:00:00 2001 From: Yoga Pangestu Date: Sun, 16 Aug 2026 20:20:01 +0700 Subject: [PATCH] feat: enhance product title display by including product name alongside variant name in transaction and stok opname components --- resources/js/pages/admin/manage/restock/create.tsx | 3 ++- .../js/pages/admin/manage/stok-opname/create.tsx | 12 +++++++++++- .../js/pages/admin/manage/stok-opname/edit.tsx | 12 +++++++++++- .../js/pages/admin/manage/transaction/create.tsx | 13 ++++++++++++- .../js/pages/admin/manage/transaction/edit.tsx | 13 ++++++++++++- 5 files changed, 48 insertions(+), 5 deletions(-) diff --git a/resources/js/pages/admin/manage/restock/create.tsx b/resources/js/pages/admin/manage/restock/create.tsx index b1f528d..ffebfcf 100644 --- a/resources/js/pages/admin/manage/restock/create.tsx +++ b/resources/js/pages/admin/manage/restock/create.tsx @@ -174,10 +174,11 @@ return 0; if (variant) { const unitPrice = stockType === 'reject' ? variant.reject_price : variant.capital_price; + const productName = productByVariantId.get(id) ?? ''; lines.push({ key: `variant-${id}`, photoUrl: variant.photo_url, - title: variant.name, + title: `${productName} — ${variant.name}`, subtitle: `${formatCurrency(unitPrice)} / pcs`, price: unitPrice, quantity, diff --git a/resources/js/pages/admin/manage/stok-opname/create.tsx b/resources/js/pages/admin/manage/stok-opname/create.tsx index 60bf043..48ad50c 100644 --- a/resources/js/pages/admin/manage/stok-opname/create.tsx +++ b/resources/js/pages/admin/manage/stok-opname/create.tsx @@ -99,6 +99,16 @@ export default function StokOpnameCreate({ products }: Props) { [products], ); + const productByVariantId = useMemo( + () => + new Map( + products.flatMap((p: ProductForStokOpname) => + p.product_variants.map((v) => [v.id, p.name]), + ), + ), + [products], + ); + const updatePhysicalStock = useCallback((variantId: number, stockType: StockType, value: number) => { setPhysicalStocks((prev) => ({ ...prev, @@ -132,7 +142,7 @@ export default function StokOpnameCreate({ products }: Props) { lines.push({ key: `variant-${id}-${type}`, photoUrl: variant.photo_url, - title: variant.name, + title: `${productByVariantId.get(id) ?? ''} — ${variant.name}`, subtitle: `${typeLabel}: ${formatNumber(quantity)}`, quantity, onAdjust: (delta) => updatePhysicalStock(id, type, quantity + delta), diff --git a/resources/js/pages/admin/manage/stok-opname/edit.tsx b/resources/js/pages/admin/manage/stok-opname/edit.tsx index 6505cbf..02b6f07 100644 --- a/resources/js/pages/admin/manage/stok-opname/edit.tsx +++ b/resources/js/pages/admin/manage/stok-opname/edit.tsx @@ -109,6 +109,16 @@ export default function StokOpnameEdit({ stokOpname, products }: Props) { [products], ); + const productByVariantId = useMemo( + () => + new Map( + products.flatMap((p: ProductForStokOpname) => + p.product_variants.map((v) => [v.id, p.name]), + ), + ), + [products], + ); + const updatePhysicalStock = useCallback((variantId: number, stockType: StockType, value: number) => { setPhysicalStocks((prev) => ({ ...prev, @@ -142,7 +152,7 @@ export default function StokOpnameEdit({ stokOpname, products }: Props) { lines.push({ key: `variant-${id}-${type}`, photoUrl: variant.photo_url, - title: variant.name, + title: `${productByVariantId.get(id) ?? ''} — ${variant.name}`, subtitle: `${typeLabel}: ${formatNumber(quantity)}`, quantity, onAdjust: (delta) => updatePhysicalStock(id, type, quantity + delta), diff --git a/resources/js/pages/admin/manage/transaction/create.tsx b/resources/js/pages/admin/manage/transaction/create.tsx index 14493bc..612d38e 100644 --- a/resources/js/pages/admin/manage/transaction/create.tsx +++ b/resources/js/pages/admin/manage/transaction/create.tsx @@ -172,6 +172,16 @@ export default function TransactionCreate({ [products], ); + const productByVariantId = useMemo( + () => + new Map( + products.flatMap((p: ProductForTransaction) => + p.product_variants.map((v) => [v.id, p.name]), + ), + ), + [products], + ); + useEffect(() => { if (channel === 'tiktok') { setPriceType('tiktok'); @@ -276,10 +286,11 @@ export default function TransactionCreate({ if (variant) { const unitPrice = getUnitPrice(id); + const productName = productByVariantId.get(id) ?? ''; lines.push({ key: `variant-${id}`, photoUrl: variant.photo_url, - title: variant.name, + title: `${productName} — ${variant.name}`, subtitle: `${formatCurrency(unitPrice)} / pcs`, price: unitPrice, quantity, diff --git a/resources/js/pages/admin/manage/transaction/edit.tsx b/resources/js/pages/admin/manage/transaction/edit.tsx index 14828e4..69d10d3 100644 --- a/resources/js/pages/admin/manage/transaction/edit.tsx +++ b/resources/js/pages/admin/manage/transaction/edit.tsx @@ -166,6 +166,16 @@ export default function TransactionEdit({ [products], ); + const productByVariantId = useMemo( + () => + new Map( + products.flatMap((p) => + p.product_variants.map((v) => [v.id, p.name]), + ), + ), + [products], + ); + const showPhoto = paymentType === 'transfer' || paymentType === 'qris'; const availablePriceTypes = useMemo(() => { @@ -248,10 +258,11 @@ export default function TransactionEdit({ if (variant) { const unitPrice = getUnitPrice(id); + const productName = productByVariantId.get(id) ?? ''; lines.push({ key: `variant-${id}`, photoUrl: variant.photo_url, - title: variant.name, + title: `${productName} — ${variant.name}`, subtitle: `${formatCurrency(unitPrice)} / pcs`, price: unitPrice, quantity,