feat: enhance product title display by including product name alongside variant name in transaction and stok opname components

This commit is contained in:
Yoga Pangestu 2026-08-16 20:20:01 +07:00
parent aaa85a45ed
commit 581761398f
5 changed files with 48 additions and 5 deletions

View File

@ -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,

View File

@ -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),

View File

@ -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),

View File

@ -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,

View File

@ -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,