dst/dstpabuaran.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
resources/js/pages/admin/manage/restock/create.tsx
View File

@ -174,10 +174,11 @@ return 0;
if (variant) { if (variant) {
const unitPrice = stockType === 'reject' ? variant.reject_price : variant.capital_price; const unitPrice = stockType === 'reject' ? variant.reject_price : variant.capital_price;
const productName = productByVariantId.get(id) ?? '';
lines.push({ lines.push({
key: `variant-${id}`, key: `variant-${id}`,
photoUrl: variant.photo_url, photoUrl: variant.photo_url,
title: variant.name, title: `${productName} — ${variant.name}`,
subtitle: `${formatCurrency(unitPrice)} / pcs`, subtitle: `${formatCurrency(unitPrice)} / pcs`,
price: unitPrice, price: unitPrice,
quantity, quantity,

12
resources/js/pages/admin/manage/stok-opname/create.tsx
View File

@ -99,6 +99,16 @@ export default function StokOpnameCreate({ products }: Props) {
[products], [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) => { const updatePhysicalStock = useCallback((variantId: number, stockType: StockType, value: number) => {
setPhysicalStocks((prev) => ({ setPhysicalStocks((prev) => ({
...prev, ...prev,
@ -132,7 +142,7 @@ export default function StokOpnameCreate({ products }: Props) {
lines.push({ lines.push({
key: `variant-${id}-${type}`, key: `variant-${id}-${type}`,
photoUrl: variant.photo_url, photoUrl: variant.photo_url,
title: variant.name, title: `${productByVariantId.get(id) ?? ''} — ${variant.name}`,
subtitle: `${typeLabel}: ${formatNumber(quantity)}`, subtitle: `${typeLabel}: ${formatNumber(quantity)}`,
quantity, quantity,
onAdjust: (delta) => updatePhysicalStock(id, type, quantity + delta), onAdjust: (delta) => updatePhysicalStock(id, type, quantity + delta),

12
resources/js/pages/admin/manage/stok-opname/edit.tsx
View File

@ -109,6 +109,16 @@ export default function StokOpnameEdit({ stokOpname, products }: Props) {
[products], [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) => { const updatePhysicalStock = useCallback((variantId: number, stockType: StockType, value: number) => {
setPhysicalStocks((prev) => ({ setPhysicalStocks((prev) => ({
...prev, ...prev,
@ -142,7 +152,7 @@ export default function StokOpnameEdit({ stokOpname, products }: Props) {
lines.push({ lines.push({
key: `variant-${id}-${type}`, key: `variant-${id}-${type}`,
photoUrl: variant.photo_url, photoUrl: variant.photo_url,
title: variant.name, title: `${productByVariantId.get(id) ?? ''} — ${variant.name}`,
subtitle: `${typeLabel}: ${formatNumber(quantity)}`, subtitle: `${typeLabel}: ${formatNumber(quantity)}`,
quantity, quantity,
onAdjust: (delta) => updatePhysicalStock(id, type, quantity + delta), onAdjust: (delta) => updatePhysicalStock(id, type, quantity + delta),

13
resources/js/pages/admin/manage/transaction/create.tsx
View File

@ -172,6 +172,16 @@ export default function TransactionCreate({
[products], [products],
); );
const productByVariantId = useMemo(
() =>
new Map(
products.flatMap((p: ProductForTransaction) =>
p.product_variants.map((v) => [v.id, p.name]),
),
),
[products],
);
useEffect(() => { useEffect(() => {
if (channel === 'tiktok') { if (channel === 'tiktok') {
setPriceType('tiktok'); setPriceType('tiktok');
@ -276,10 +286,11 @@ export default function TransactionCreate({
if (variant) { if (variant) {
const unitPrice = getUnitPrice(id); const unitPrice = getUnitPrice(id);
const productName = productByVariantId.get(id) ?? '';
lines.push({ lines.push({
key: `variant-${id}`, key: `variant-${id}`,
photoUrl: variant.photo_url, photoUrl: variant.photo_url,
title: variant.name, title: `${productName} — ${variant.name}`,
subtitle: `${formatCurrency(unitPrice)} / pcs`, subtitle: `${formatCurrency(unitPrice)} / pcs`,
price: unitPrice, price: unitPrice,
quantity, quantity,

13
resources/js/pages/admin/manage/transaction/edit.tsx
View File

@ -166,6 +166,16 @@ export default function TransactionEdit({
[products], [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 showPhoto = paymentType === 'transfer' || paymentType === 'qris';
const availablePriceTypes = useMemo(() => { const availablePriceTypes = useMemo(() => {
@ -248,10 +258,11 @@ export default function TransactionEdit({
if (variant) { if (variant) {
const unitPrice = getUnitPrice(id); const unitPrice = getUnitPrice(id);
const productName = productByVariantId.get(id) ?? '';
lines.push({ lines.push({
key: `variant-${id}`, key: `variant-${id}`,
photoUrl: variant.photo_url, photoUrl: variant.photo_url,
title: variant.name, title: `${productName} — ${variant.name}`,
subtitle: `${formatCurrency(unitPrice)} / pcs`, subtitle: `${formatCurrency(unitPrice)} / pcs`,
price: unitPrice, price: unitPrice,
quantity, quantity,