Compare commits

..

No commits in common. "f128ace2ea746f073aba12f527c3772805f04157" and "9fead3dfa94fc25c03d8c697af64ccb91cf76f9e" have entirely different histories.

30 changed files with 449 additions and 1013 deletions

View File

@ -8,7 +8,6 @@
use App\Http\Requests\PaginatedRequest;
use App\Models\Cutting;
use App\Services\Admin\Manage\CuttingService;
use App\Services\Admin\Master\RawMaterial\RawMaterialService;
use App\Services\Admin\Master\RawMaterial\RawMaterialVariantService;
use Illuminate\Http\JsonResponse;
use Illuminate\Http\RedirectResponse;
@ -19,7 +18,6 @@ class CuttingController extends Controller
{
public function __construct(
private CuttingService $service,
private RawMaterialService $rawMaterialService,
private RawMaterialVariantService $rawMaterialVariantService,
) {}
@ -42,7 +40,7 @@ public function index(PaginatedRequest $request): Response
public function create(): Response
{
return Inertia::render('admin/manage/cutting/create', [
'rawMaterials' => $this->rawMaterialService->getActiveMaterials(),
'rawMaterials' => $this->rawMaterialVariantService->getForCutting(),
]);
}
@ -74,7 +72,7 @@ public function edit(Cutting $cutting): Response
{
return Inertia::render('admin/manage/cutting/edit', [
'cutting' => $this->service->getForEdit($cutting),
'rawMaterials' => $this->rawMaterialService->getActiveMaterials(),
'rawMaterials' => $this->rawMaterialVariantService->getForCutting(),
]);
}

View File

@ -7,7 +7,6 @@
use App\Http\Requests\PaginatedRequest;
use App\Models\Purchase;
use App\Services\Admin\Manage\PurchaseService;
use App\Services\Admin\Master\RawMaterial\RawMaterialService;
use App\Services\Admin\Master\RawMaterial\RawMaterialVariantService;
use App\Services\Admin\Master\SupplierService;
use Illuminate\Http\JsonResponse;
@ -20,7 +19,6 @@ class PurchaseController extends Controller
public function __construct(
private readonly PurchaseService $service,
private readonly SupplierService $supplierService,
private readonly RawMaterialService $rawMaterialService,
private readonly RawMaterialVariantService $rawMaterialVariantService,
) {}
@ -41,7 +39,7 @@ public function create(): Response
{
return Inertia::render('admin/manage/purchase/create', [
'suppliers' => $this->supplierService->getAll(),
'rawMaterials' => $this->rawMaterialService->getActiveMaterials(),
'rawMaterials' => $this->rawMaterialVariantService->getForCutting(),
]);
}
@ -60,7 +58,7 @@ public function edit(Purchase $purchase): Response
return Inertia::render('admin/manage/purchase/edit', [
'purchase' => $this->service->getForEdit($purchase),
'suppliers' => $this->supplierService->getAll(),
'rawMaterials' => $this->rawMaterialService->getActiveMaterials(),
'rawMaterials' => $this->rawMaterialVariantService->getForCutting(),
]);
}

View File

@ -7,7 +7,6 @@
use App\Http\Requests\PaginatedRequest;
use App\Models\Restock;
use App\Services\Admin\Manage\RestockService;
use App\Services\Admin\Master\Product\ProductService;
use App\Services\Admin\Master\Product\ProductVariantService;
use Illuminate\Http\JsonResponse;
use Illuminate\Http\RedirectResponse;
@ -18,7 +17,6 @@ class RestockController extends Controller
{
public function __construct(
private RestockService $service,
private ProductService $productService,
private ProductVariantService $productVariantService,
) {}
@ -35,7 +33,7 @@ public function index(PaginatedRequest $request): Response
public function create(): Response
{
return Inertia::render('admin/manage/restock/create', [
'products' => $this->productService->getActiveProducts(),
'products' => $this->productVariantService->getForRestock(),
]);
}
@ -53,7 +51,7 @@ public function edit(Restock $restock): Response
{
return Inertia::render('admin/manage/restock/edit', [
'restock' => $this->service->getForEdit($restock),
'products' => $this->productService->getActiveProducts(),
'products' => $this->productVariantService->getForRestock(),
]);
}

View File

@ -13,7 +13,6 @@
use App\Models\User;
use App\Services\Admin\Manage\TransactionService;
use App\Services\Admin\Master\CustomerService;
use App\Services\Admin\Master\Product\ProductService;
use App\Services\Admin\Master\Product\ProductVariantService;
use Illuminate\Http\JsonResponse;
use Illuminate\Http\RedirectResponse;
@ -24,7 +23,6 @@ class TransactionController extends Controller
{
public function __construct(
private TransactionService $service,
private ProductService $productService,
private ProductVariantService $productVariantService,
private CustomerService $customerService,
) {}
@ -52,7 +50,7 @@ public function create(): Response
$isCashier = $user->hasRole(Role::CASHIER);
return Inertia::render('admin/manage/transaction/create', [
'products' => $this->productService->getActiveProducts(),
'products' => $this->productVariantService->getForTransaction(),
'customers' => $this->customerService->getAll(),
'employees' => $this->getEmployees(),
'channelOptions' => OrderChannel::toSelect(),
@ -82,7 +80,7 @@ public function edit(Order $transaction): Response
return Inertia::render('admin/manage/transaction/edit', [
'transaction' => $this->service->getForEdit($transaction),
'products' => $this->productService->getActiveProducts(),
'products' => $this->productVariantService->getForTransaction(),
'customers' => $this->customerService->getAll(),
'employees' => $this->getEmployees(),
'channelOptions' => OrderChannel::toSelect(),

View File

@ -133,11 +133,4 @@ public function variants(Product $product): JsonResponse
'variants' => $this->service->getVariants($product),
]);
}
public function activeProducts(): JsonResponse
{
return response()->json([
'products' => $this->service->getActiveProducts(),
]);
}
}

View File

@ -92,11 +92,4 @@ public function variants(RawMaterial $rawMaterial): JsonResponse
'variants' => $this->service->getVariants($rawMaterial),
]);
}
public function activeMaterials(): JsonResponse
{
return response()->json([
'materials' => $this->service->getActiveMaterials(),
]);
}
}

View File

@ -31,11 +31,11 @@ public function rules(): array
'variants' => [Rule::requiredUnless(fn () => $this->input('mode') === 'existing'), 'array', 'min:1'],
'variants.*.variant' => [Rule::requiredUnless(fn () => $this->input('mode') === 'existing'), 'string', 'max:200'],
'variants.*.price' => [Rule::requiredUnless(fn () => $this->input('mode') === 'existing'), 'integer', 'min:0'],
'variants.*.stock' => [Rule::requiredUnless(fn () => $this->input('mode') === 'existing'), 'numeric', 'min:0'],
'variants.*.stock' => [Rule::requiredUnless(fn () => $this->input('mode') === 'existing'), 'integer', 'min:0'],
'variants.*.photo_key' => [Rule::requiredUnless(fn () => $this->input('mode') === 'existing'), 'string', 'max:500'],
'existing_items' => [Rule::requiredIf(fn () => $this->input('mode') === 'existing'), 'array', 'min:1'],
'existing_items.*.raw_material_price_id' => ['required', 'integer', Rule::exists('raw_material_prices', 'id')],
'existing_items.*.quantity' => ['required', 'numeric', 'min:0.01'],
'existing_items.*.quantity' => ['required', 'integer', 'min:1'],
'existing_items.*.unit_price' => ['required', 'integer', 'min:0'],
'supplier_id' => ['required', 'integer', Rule::exists('suppliers', 'id')],
'discount' => ['nullable', 'integer', 'min:0'],

View File

@ -19,9 +19,9 @@ class PurchaseItem extends Model
protected function casts(): array
{
return [
'quantity' => 'decimal:2',
'quantity' => 'integer',
'unit_price' => 'integer',
'subtotal' => 'decimal:2',
'subtotal' => 'integer',
];
}

View File

@ -257,12 +257,6 @@ public function getForEdit(Cutting $cutting): array
'combinations' => $combinations,
'photo_keys' => $photoKeys,
'photo_urls' => $photoUrls,
'existing_material_ids' => $cutting->cuttingMaterials
->map(fn (CuttingMaterial $m) => $m->rawMaterialPrice?->raw_material_id)
->filter()
->unique()
->values()
->all(),
];
}

View File

@ -151,13 +151,11 @@ public function getForEdit(Purchase $purchase): array
fn ($media) => $media->getCustomProperty('s3_key') ?? $media->file_name
)->toArray();
$purchasePhotoUrls = $purchaseMedia->map(
fn ($media) => $media->getGeneratedConversions()->contains('thumb')
? $this->s3Service->getTemporaryUrl($media->getPath('thumb'))
: $this->s3Service->getTemporaryUrl($media->getPath())
fn ($media) => $this->s3Service->getTemporaryUrl($media->getPath())
)->toArray();
$existingQuantities = $items->mapWithKeys(fn (PurchaseItem $item) => [
(int) $item->raw_material_price_id => (string) $item->quantity,
(int) $item->raw_material_price_id => (int) $item->quantity,
])->all();
return [
@ -174,7 +172,6 @@ public function getForEdit(Purchase $purchase): array
'default_mode' => $singleMaterial && ! $sharedWithOther ? 'new' : 'existing',
'existing_material_name' => $materials->first()->name ?? null,
'existing_quantities' => $existingQuantities,
'existing_material_ids' => $materials->pluck('id')->values()->all(),
];
}
@ -194,7 +191,7 @@ private function storeFromExisting(array $data): Purchase
$subtotal = 0;
$itemRows = collect($data['existing_items'])->map(function ($item) use ($now, &$subtotal) {
$itemSubtotal = $item['unit_price'] * $item['quantity'];
$itemSubtotal = (int) ($item['unit_price'] * $item['quantity']);
$subtotal += $itemSubtotal;
return [
@ -267,7 +264,7 @@ private function storeNew(array $data): Purchase
$subtotal = 0;
$now = now();
$priceRows = collect($data['variants'])->map(function ($v) use ($rawMaterial, $now, &$subtotal) {
$itemSubtotal = $v['price'] * $v['stock'];
$itemSubtotal = (int) ($v['price'] * $v['stock']);
$subtotal += $itemSubtotal;
return [
@ -325,7 +322,7 @@ private function storeNew(array $data): Purchase
'user_id' => auth()->id(),
'quantity' => $v['stock'],
'unit_price' => $v['price'],
'subtotal' => $v['price'] * $v['stock'],
'subtotal' => (int) ($v['price'] * $v['stock']),
'created_at' => $now,
'updated_at' => $now,
];
@ -378,7 +375,7 @@ public function update(Purchase $purchase, array $data): Purchase
if (($data['mode'] ?? 'new') === 'existing') {
$itemRows = collect($data['existing_items'])->map(function ($item) use ($now, &$subtotal) {
$itemSubtotal = $item['unit_price'] * $item['quantity'];
$itemSubtotal = (int) ($item['unit_price'] * $item['quantity']);
$subtotal += $itemSubtotal;
return [
@ -429,7 +426,7 @@ public function update(Purchase $purchase, array $data): Purchase
}
if ($price) {
$price->increment('stock', $v['stock']);
$price->increment('stock', (int) $v['stock']);
$price->update(['price' => $v['price']]);
} else {
$price = $rawMaterial->rawMaterialPrices()->create([
@ -449,7 +446,7 @@ public function update(Purchase $purchase, array $data): Purchase
);
}
$itemSubtotal = $v['price'] * $v['stock'];
$itemSubtotal = (int) ($v['price'] * $v['stock']);
$subtotal += $itemSubtotal;
return [

View File

@ -66,7 +66,7 @@ public function getForEdit(Restock $restock): array
$restock->load([
'restockItems' => fn ($q) => $q
->select(['id', 'restock_id', 'product_variant_id', 'quantity', 'unit_price', 'subtotal']),
'restockItems.productVariant:id,product_id,name',
'restockItems.productVariant:id,name',
]);
$media = $restock->getFirstMedia('photos');
@ -83,12 +83,6 @@ public function getForEdit(Restock $restock): array
'quantity' => $item->quantity,
'unit_price' => $item->unit_price,
]),
'existing_product_ids' => $restock->restockItems
->map(fn ($item) => $item->productVariant?->product_id)
->filter()
->unique()
->values()
->all(),
];
}

View File

@ -107,7 +107,6 @@ public function getForEdit(Order $order): array
{
$order->load([
'orderItems:id,order_id,product_variant_id,stock_quality,quantity,unit_price',
'orderItems.productVariant:id,product_id,name',
]);
$stockType = $order->orderItems->first()?->stock_quality?->value ?? 'good';
@ -139,12 +138,6 @@ public function getForEdit(Order $order): array
'quantity' => $item->quantity,
'unit_price' => $item->unit_price,
]),
'existing_product_ids' => $order->orderItems
->map(fn (OrderItem $item) => $item->productVariant?->product_id)
->filter()
->unique()
->values()
->all(),
];
}

View File

@ -66,14 +66,6 @@ public function paginated(int $perPage = 25, string $search = '', string $sort =
->paginate($perPage);
}
public function getActiveProducts(): \Illuminate\Support\Collection
{
return Product::select(['id', 'name'])
->active()
->orderBy('name')
->get();
}
public function getVariants(Product $product): Collection
{
return $product->productVariants()

View File

@ -60,36 +60,6 @@ public function getForStokOpname(): array
})->toArray();
}
public function getActiveProducts(): \Illuminate\Support\Collection
{
return Product::select(['id', 'name'])
->active()
->orderBy('name')
->get();
}
public function getVariantsByProduct(Product $product): \Illuminate\Support\Collection
{
return $product->productVariants()
->select(['id', 'product_id', 'name', 'stock', 'reject_stock', 'retail_stock'])
->with(['productPrices:id,variant_id,type,price', 'media'])
->get()
->each(function (ProductVariant $variant) {
$media = $variant->getFirstMedia('images');
$variant->photo_url = $media
? $this->s3Service->getTemporaryUrl($media->getPath())
: null;
$variant->photo_conversion_url = $media
? ($media->getGeneratedConversions()->contains('thumb')
? $this->s3Service->getTemporaryUrl($media->getPath('thumb'))
: $this->s3Service->getTemporaryUrl($media->getPath()))
: null;
$prices = $variant->productPrices->mapWithKeys(fn ($p) => [$p->type->value => $p->price]);
$variant->prices = $prices;
});
}
public function getForRestock(): array
{
$products = Product::query()

View File

@ -57,14 +57,6 @@ public function paginated(int $perPage = 25, string $search = '', string $sort =
->paginate($perPage);
}
public function getActiveMaterials(): Collection
{
return RawMaterial::select(['id', 'name', 'unit'])
->active()
->orderBy('name')
->get();
}
public function getVariants(RawMaterial $rawMaterial): Collection
{
return $rawMaterial->rawMaterialPrices()

View File

@ -1,30 +0,0 @@
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::table('purchase_items', function (Blueprint $table) {
$table->decimal('quantity', 10, 2)->default(0)->change();
$table->decimal('subtotal', 14, 2)->default(0)->change();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::table('purchase_items', function (Blueprint $table) {
$table->unsignedInteger('quantity')->default(0)->change();
$table->unsignedInteger('subtotal')->default(0)->change();
});
}
};

View File

@ -10,12 +10,12 @@ export type PurchaseDraftData = {
variants: Array<{
variant: string;
price: number;
stock: string;
stock: number;
photo_keys?: string[];
}>;
mode?: 'new' | 'existing';
selectedMaterialName?: string;
quantities?: Record<string, string>;
quantities?: Record<string, number>;
photo?: string;
};

View File

@ -91,7 +91,6 @@ export type CuttingForEdit = {
}[];
photo_keys: string[];
photo_urls: string[];
existing_material_ids: number[];
};
export type CuttingCreateData = {
@ -99,15 +98,14 @@ export type CuttingCreateData = {
id: number;
name: string;
unit: string;
is_active: boolean;
raw_material_prices: {
id: number;
variant: string;
price: number;
stock: number;
photo_url: string | null;
photo_conversion_url: string | null;
}[];
}[];
};
export type RawMaterialVariant = {
id: number;
raw_material_id: number;
variant: string;
price: number;
stock: number;
photo_url: string | null;
photo_conversion_url: string | null;
};

View File

@ -2,7 +2,7 @@
import { Form, Head, Link, usePage } from '@inertiajs/react';
import { ArrowLeft, Check, Layers, Plus, Search, ShoppingCart, Trash2 } from 'lucide-react';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { useCallback, useMemo, useRef, useState } from 'react';
import { toast } from 'sonner';
import { ConfirmDialog } from '@/components/dialogs';
import { FileUploadMultiple } from '@/components/inputs';
@ -23,7 +23,7 @@ import { formatNumber } from '@/lib/format';
import { getTemporaryUrl } from '@/lib/upload';
import { formatCurrency } from '@/lib/utils';
import { index as cuttingIndex, store } from '@/routes/admin/manage/cuttings';
import type { CuttingCreateData, RawMaterialVariant } from './columns';
import type { CuttingCreateData } from './columns';
type MaterialState = {
raw_material_price_id: number;
@ -79,8 +79,6 @@ export default function CuttingCreate({ rawMaterials }: Props) {
});
const [selectedMaterialName, setSelectedMaterialName] = useState(draft?.selectedMaterialName ?? '');
const [variantSearch, setVariantSearch] = useState('');
const [fetchedVariants, setFetchedVariants] = useState<Map<number, RawMaterialVariant[]>>(new Map());
const [loadingVariants, setLoadingVariants] = useState(false);
const [productName, setProductName] = useState(draft?.productName ?? '');
const [sample, setSample] = useState(draft?.sample ?? 0);
@ -150,87 +148,32 @@ export default function CuttingCreate({ rawMaterials }: Props) {
const materialsRef = useRef(materials);
materialsRef.current = materials;
const priceMap = useMemo(() => {
const map = new Map<number, RawMaterialVariant>();
for (const [, variants] of fetchedVariants) {
for (const p of variants) {
map.set(p.id, p);
}
}
return map;
}, [fetchedVariants]);
const priceMap = useMemo(
() => new Map(rawMaterials.flatMap((m) => m.raw_material_prices.map((p) => [p.id, p]))),
[rawMaterials],
);
const selectedMaterial = useMemo(
() => rawMaterials.find((m) => m.name === selectedMaterialName) ?? null,
[rawMaterials, selectedMaterialName],
);
const selectedMaterialVariants = useMemo(
() => (selectedMaterial ? fetchedVariants.get(selectedMaterial.id) ?? [] : []),
[selectedMaterial, fetchedVariants],
);
useEffect(() => {
if (!selectedMaterial) return;
if (fetchedVariants.has(selectedMaterial.id)) return;
setLoadingVariants(true);
fetch(`/admin/master/raw-materials/${selectedMaterial.id}/variants`)
.then((res) => res.json())
.then((data) => {
setFetchedVariants((prev) => {
const next = new Map(prev);
next.set(selectedMaterial.id, data.variants);
return next;
});
})
.catch(() => {
toast.error('Gagal memuat varian bahan baku.');
})
.finally(() => setLoadingVariants(false));
}, [selectedMaterial, fetchedVariants]);
const comboMaterialVariants = useMemo(
() => (comboMaterial ? fetchedVariants.get(comboMaterial.id) ?? [] : []),
[comboMaterial, fetchedVariants],
);
useEffect(() => {
if (!comboMaterial) return;
if (fetchedVariants.has(comboMaterial.id)) return;
setLoadingVariants(true);
fetch(`/admin/master/raw-materials/${comboMaterial.id}/variants`)
.then((res) => res.json())
.then((data) => {
setFetchedVariants((prev) => {
const next = new Map(prev);
next.set(comboMaterial.id, data.variants);
return next;
});
})
.catch(() => {
toast.error('Gagal memuat varian bahan baku.');
})
.finally(() => setLoadingVariants(false));
}, [comboMaterial, fetchedVariants]);
const groupedVariants = useMemo(() => {
if (!variantSearch) return [];
if (!selectedMaterial) return [];
const search = variantSearch.toLowerCase();
return [{
...selectedMaterial,
raw_material_prices: selectedMaterialVariants.filter(
(p) => p.variant.toLowerCase().includes(search),
),
}];
}, [selectedMaterial, selectedMaterialVariants, variantSearch]);
return rawMaterials
.map((rm) => ({
...rm,
raw_material_prices: rm.raw_material_prices.filter(
(p) => p.variant.toLowerCase().includes(search),
),
}))
.filter((rm) => rm.raw_material_prices.length > 0);
}, [rawMaterials, variantSearch]);
const addVariant = useCallback(
(rawMaterial: { id: number; name: string; unit: string }, priceId: number) => {
const variants = fetchedVariants.get(rawMaterial.id) ?? [];
const price = variants.find((p) => p.id === priceId);
(rawMaterial: (typeof rawMaterials)[number], priceId: number) => {
const price = rawMaterial.raw_material_prices.find((p) => p.id === priceId);
if (!price) {
return;
@ -257,7 +200,7 @@ export default function CuttingCreate({ rawMaterials }: Props) {
];
});
},
[fetchedVariants],
[],
);
const openComboDialog = useCallback((materialName: string, preSelectPriceId?: number) => {
@ -280,22 +223,30 @@ export default function CuttingCreate({ rawMaterials }: Props) {
const comboIndex = combinations.length;
const comboMaterialData = rawMaterials.find((m) => m.name === comboMaterialName);
const variants = comboMaterialData ? (fetchedVariants.get(comboMaterialData.id) ?? []) : [];
const newMaterials: MaterialState[] = comboSelectedPriceIds.map((priceId) => {
const price = variants.find((p) => p.id === priceId);
let foundMaterial: typeof rawMaterials[number] | undefined;
let foundPrice: typeof rawMaterials[number]['raw_material_prices'][number] | undefined;
for (const rm of rawMaterials) {
const p = rm.raw_material_prices.find((pp) => pp.id === priceId);
if (p) {
foundMaterial = rm;
foundPrice = p;
break;
}
}
return {
raw_material_price_id: priceId,
material_usage: '0',
material_result: 0,
combination_id: comboIndex,
variant: price?.variant ?? '',
material_name: comboMaterialData?.name ?? '',
unit: comboMaterialData?.unit ?? '',
photo_url: price?.photo_url ?? null,
photo_conversion_url: price?.photo_conversion_url ?? null,
variant: foundPrice?.variant ?? '',
material_name: foundMaterial?.name ?? '',
unit: foundMaterial?.unit ?? '',
photo_url: foundPrice?.photo_url ?? null,
photo_conversion_url: foundPrice?.photo_conversion_url ?? null,
};
});
@ -311,7 +262,7 @@ export default function CuttingCreate({ rawMaterials }: Props) {
setComboMaterialName('');
setComboSelectedPriceIds([]);
setComboResult(0);
}, [comboSelectedPriceIds, comboResult, rawMaterials, fetchedVariants, comboMaterialName, combinations.length]);
}, [comboSelectedPriceIds, comboResult, rawMaterials, combinations.length]);
const removeMaterial = useCallback((index: number) => {
setDeleteMaterialIndex(index);
@ -483,53 +434,43 @@ export default function CuttingCreate({ rawMaterials }: Props) {
<p className="text-sm text-muted-foreground">Tidak ada varian ditemukan.</p>
)}
{!variantSearch && selectedMaterial && (
{!variantSearch && selectedMaterial && selectedMaterial.raw_material_prices.length > 0 && (
<div className="space-y-2">
{loadingVariants ? (
<div className="flex items-center justify-center py-8 text-sm text-muted-foreground">
Memuat varian...
</div>
) : selectedMaterialVariants.length === 0 ? (
<div className="flex items-center justify-center py-8 text-sm text-muted-foreground">
Tidak ada varian ditemukan.
</div>
) : (
<div className="space-y-2">
{selectedMaterialVariants.map((price) => {
const isAdded = materials.some((m) => m.raw_material_price_id === price.id);
const addedCount = materials.filter((m) => m.raw_material_price_id === price.id).length;
<div className="space-y-2">
{selectedMaterial.raw_material_prices.map((price) => {
const isAdded = materials.some((m) => m.raw_material_price_id === price.id);
const addedCount = materials.filter((m) => m.raw_material_price_id === price.id).length;
return (
<div key={price.id} className={`flex flex-wrap items-center justify-between gap-2 rounded-lg border p-3 ${isAdded ? 'border-primary' : ''}`}>
<div className="flex min-w-0 items-center gap-3">
{price.photo_conversion_url ?? price.photo_url ? (
<img src={price.photo_conversion_url ?? price.photo_url} alt={price.variant} className="h-10 w-10 shrink-0 rounded-md object-cover" />
) : (
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-muted text-xs text-muted-foreground">N/A</div>
)}
<div className="min-w-0">
<p className="truncate font-medium">{price.variant}</p>
<p className="text-xs text-muted-foreground">
Stok: {formatNumber(Number(price.stock))} {selectedMaterial.unit} · {formatCurrency(price.price)}
{addedCount > 0 && ` · ×${addedCount}`}
</p>
</div>
</div>
<div className="flex items-center gap-1">
<Button type="button" variant="outline" size="sm" onClick={() => addVariant(selectedMaterial, price.id)}>
<Plus className="h-4 w-4" />
Tambah
</Button>
<Button type="button" variant="outline" size="sm" onClick={() => openComboDialog(selectedMaterial.name, price.id)}>
<Layers className="h-4 w-4" />
Kombinasi
</Button>
return (
<div key={price.id} className={`flex flex-wrap items-center justify-between gap-2 rounded-lg border p-3 ${isAdded ? 'border-primary' : ''}`}>
<div className="flex min-w-0 items-center gap-3">
{price.photo_conversion_url ?? price.photo_url ? (
<img src={price.photo_conversion_url ?? price.photo_url} alt={price.variant} className="h-10 w-10 shrink-0 rounded-md object-cover" />
) : (
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-muted text-xs text-muted-foreground">N/A</div>
)}
<div className="min-w-0">
<p className="truncate font-medium">{price.variant}</p>
<p className="text-xs text-muted-foreground">
Stok: {formatNumber(Number(price.stock))} {selectedMaterial.unit} · {formatCurrency(price.price)}
{addedCount > 0 && ` · ×${addedCount}`}
</p>
</div>
</div>
);
})}
</div>
)}
<div className="flex items-center gap-1">
<Button type="button" variant="outline" size="sm" onClick={() => addVariant(selectedMaterial, price.id)}>
<Plus className="h-4 w-4" />
Tambah
</Button>
<Button type="button" variant="outline" size="sm" onClick={() => openComboDialog(selectedMaterial.name, price.id)}>
<Layers className="h-4 w-4" />
Kombinasi
</Button>
</div>
</div>
);
})}
</div>
</div>
)}
</CardContent>
@ -799,13 +740,18 @@ export default function CuttingCreate({ rawMaterials }: Props) {
<div className="space-y-1">
{comboSelectedPriceIds.map((priceId) => {
let variantName = '';
let materialName = comboMaterialName;
let materialName = '';
let photoUrl: string | null = null;
const price = comboMaterialVariants.find((pp) => pp.id === priceId);
if (price) {
variantName = price.variant;
photoUrl = price.photo_conversion_url ?? price.photo_url;
for (const rm of rawMaterials) {
const p = rm.raw_material_prices.find((pp) => pp.id === priceId);
if (p) {
variantName = p.variant;
materialName = rm.name;
photoUrl = p.photo_conversion_url ?? p.photo_url;
break;
}
}
return (
@ -831,43 +777,33 @@ export default function CuttingCreate({ rawMaterials }: Props) {
</div>
)}
{comboMaterial && (
{comboMaterial && comboMaterial.raw_material_prices.length > 0 && (
<div className="space-y-2">
<Label className="text-sm font-medium">Pilih Varian</Label>
{loadingVariants ? (
<div className="flex items-center justify-center py-4 text-sm text-muted-foreground">
Memuat varian...
</div>
) : comboMaterialVariants.length === 0 ? (
<div className="flex items-center justify-center py-4 text-sm text-muted-foreground">
Tidak ada varian ditemukan.
</div>
) : (
<div className="space-y-2">
{comboMaterialVariants.map((price) => {
const isSelected = comboSelectedPriceIds.includes(price.id);
<div className="space-y-2">
{comboMaterial.raw_material_prices.map((price) => {
const isSelected = comboSelectedPriceIds.includes(price.id);
return (
<div key={price.id} className={`flex items-center justify-between gap-3 rounded-lg border p-3 ${isSelected ? 'border-primary' : ''}`}>
<div className="flex min-w-0 items-center gap-3">
{price.photo_conversion_url ?? price.photo_url ? (
<img src={price.photo_conversion_url ?? price.photo_url} alt={price.variant} className="h-10 w-10 shrink-0 rounded-md object-cover" />
) : (
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-muted text-xs text-muted-foreground">N/A</div>
)}
<div className="min-w-0">
<p className="truncate font-medium">{price.variant}</p>
<p className="text-xs text-muted-foreground">Stok: {formatNumber(Number(price.stock))} {comboMaterial.unit}</p>
</div>
return (
<div key={price.id} className={`flex items-center justify-between gap-3 rounded-lg border p-3 ${isSelected ? 'border-primary' : ''}`}>
<div className="flex min-w-0 items-center gap-3">
{price.photo_conversion_url ?? price.photo_url ? (
<img src={price.photo_conversion_url ?? price.photo_url} alt={price.variant} className="h-10 w-10 shrink-0 rounded-md object-cover" />
) : (
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-muted text-xs text-muted-foreground">N/A</div>
)}
<div className="min-w-0">
<p className="truncate font-medium">{price.variant}</p>
<p className="text-xs text-muted-foreground">Stok: {formatNumber(Number(price.stock))} {comboMaterial.unit}</p>
</div>
<Button type="button" variant={isSelected ? 'default' : 'outline'} size="sm" onClick={() => toggleComboPrice(price.id)}>
{isSelected ? <><Check className="h-4 w-4" /> Dipilih</> : 'Pilih'}
</Button>
</div>
);
})}
</div>
)}
<Button type="button" variant={isSelected ? 'default' : 'outline'} size="sm" onClick={() => toggleComboPrice(price.id)}>
{isSelected ? <><Check className="h-4 w-4" /> Dipilih</> : 'Pilih'}
</Button>
</div>
);
})}
</div>
</div>
)}
</div>

View File

@ -2,7 +2,7 @@
import { Form, Head, Link, usePage } from '@inertiajs/react';
import { ArrowLeft, Check, Layers, Plus, Search, ShoppingCart, Trash2 } from 'lucide-react';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { useCallback, useMemo, useRef, useState } from 'react';
import { toast } from 'sonner';
import { ConfirmDialog } from '@/components/dialogs';
import { FileUploadMultiple } from '@/components/inputs';
@ -21,7 +21,7 @@ import { formatNumber } from '@/lib/format';
import { getTemporaryUrl } from '@/lib/upload';
import { formatCurrency } from '@/lib/utils';
import { index as cuttingIndex, update } from '@/routes/admin/manage/cuttings';
import type { CuttingCreateData, CuttingForEdit, RawMaterialVariant } from './columns';
import type { CuttingCreateData, CuttingForEdit } from './columns';
type MaterialState = {
id?: number;
@ -54,6 +54,13 @@ export default function CuttingEdit({ cutting, rawMaterials }: Props) {
cutting.combinations.forEach((c, i) => comboIdToIndex.set(c.id, i));
return cutting.materials.map((m) => {
const rawMaterial = rawMaterials.find((rm) =>
rm.raw_material_prices.some((p) => p.id === m.raw_material_price_id),
);
const price = rawMaterial?.raw_material_prices.find(
(p) => p.id === m.raw_material_price_id,
);
return {
id: m.id,
raw_material_price_id: m.raw_material_price_id,
@ -63,11 +70,11 @@ export default function CuttingEdit({ cutting, rawMaterials }: Props) {
m.combination_id !== null
? (comboIdToIndex.get(m.combination_id) ?? null)
: null,
variant: m.variant ?? '',
material_name: '',
unit: '',
photo_url: m.photo_url ?? null,
photo_conversion_url: null,
variant: price?.variant ?? m.variant ?? '',
material_name: rawMaterial?.name ?? '',
unit: rawMaterial?.unit ?? '',
photo_url: price?.photo_url ?? m.photo_url ?? null,
photo_conversion_url: price?.photo_conversion_url ?? m.photo_conversion_url ?? null,
};
});
});
@ -82,8 +89,6 @@ export default function CuttingEdit({ cutting, rawMaterials }: Props) {
const [selectedMaterialName, setSelectedMaterialName] = useState('');
const [variantSearch, setVariantSearch] = useState('');
const [fetchedVariants, setFetchedVariants] = useState<Map<number, RawMaterialVariant[]>>(new Map());
const [loadingVariants, setLoadingVariants] = useState(false);
const [productName, setProductName] = useState(cutting.product_name);
const [sample, setSample] = useState(cutting.sample);
@ -122,120 +127,35 @@ export default function CuttingEdit({ cutting, rawMaterials }: Props) {
[rawMaterials, comboMaterialName],
);
useEffect(() => {
const materialIds = cutting.existing_material_ids ?? [];
if (materialIds.length === 0) return;
const toFetch = materialIds.filter((id) => !fetchedVariants.has(id));
if (toFetch.length === 0) return;
setLoadingVariants(true);
Promise.all(
toFetch.map((id) =>
fetch(`/admin/master/raw-materials/${id}/variants`)
.then((res) => res.json())
.then((data) => [id, data.variants] as const)
),
)
.then((results) => {
setFetchedVariants((prev) => {
const next = new Map(prev);
for (const [id, variants] of results) {
next.set(id, variants);
}
return next;
});
})
.catch(() => {
toast.error('Gagal memuat varian bahan baku.');
})
.finally(() => setLoadingVariants(false));
}, [cutting.existing_material_ids]);
const materialsRef = useRef(materials);
materialsRef.current = materials;
const priceMap = useMemo(() => {
const map = new Map<number, RawMaterialVariant>();
for (const [, variants] of fetchedVariants) {
for (const p of variants) {
map.set(p.id, p);
}
}
return map;
}, [fetchedVariants]);
const priceMap = useMemo(
() => new Map(rawMaterials.flatMap((m) => m.raw_material_prices.map((p) => [p.id, p]))),
[rawMaterials],
);
const selectedMaterial = useMemo(
() => rawMaterials.find((m) => m.name === selectedMaterialName) ?? null,
[rawMaterials, selectedMaterialName],
);
const selectedMaterialVariants = useMemo(
() => (selectedMaterial ? fetchedVariants.get(selectedMaterial.id) ?? [] : []),
[selectedMaterial, fetchedVariants],
);
useEffect(() => {
if (!selectedMaterial) return;
if (fetchedVariants.has(selectedMaterial.id)) return;
setLoadingVariants(true);
fetch(`/admin/master/raw-materials/${selectedMaterial.id}/variants`)
.then((res) => res.json())
.then((data) => {
setFetchedVariants((prev) => {
const next = new Map(prev);
next.set(selectedMaterial.id, data.variants);
return next;
});
})
.catch(() => {
toast.error('Gagal memuat varian bahan baku.');
})
.finally(() => setLoadingVariants(false));
}, [selectedMaterial, fetchedVariants]);
const comboMaterialVariants = useMemo(
() => (comboMaterial ? fetchedVariants.get(comboMaterial.id) ?? [] : []),
[comboMaterial, fetchedVariants],
);
useEffect(() => {
if (!comboMaterial) return;
if (fetchedVariants.has(comboMaterial.id)) return;
setLoadingVariants(true);
fetch(`/admin/master/raw-materials/${comboMaterial.id}/variants`)
.then((res) => res.json())
.then((data) => {
setFetchedVariants((prev) => {
const next = new Map(prev);
next.set(comboMaterial.id, data.variants);
return next;
});
})
.catch(() => {
toast.error('Gagal memuat varian bahan baku.');
})
.finally(() => setLoadingVariants(false));
}, [comboMaterial, fetchedVariants]);
const groupedVariants = useMemo(() => {
if (!variantSearch) return [];
if (!selectedMaterial) return [];
const search = variantSearch.toLowerCase();
return [{
...selectedMaterial,
raw_material_prices: selectedMaterialVariants.filter(
(p) => p.variant.toLowerCase().includes(search),
),
}];
}, [selectedMaterial, selectedMaterialVariants, variantSearch]);
return rawMaterials
.map((rm) => ({
...rm,
raw_material_prices: rm.raw_material_prices.filter(
(p) => p.variant.toLowerCase().includes(search),
),
}))
.filter((rm) => rm.raw_material_prices.length > 0);
}, [rawMaterials, variantSearch]);
const addVariant = useCallback(
(rawMaterial: { id: number; name: string; unit: string }, priceId: number) => {
const variants = fetchedVariants.get(rawMaterial.id) ?? [];
const price = variants.find((p) => p.id === priceId);
(rawMaterial: (typeof rawMaterials)[number], priceId: number) => {
const price = rawMaterial.raw_material_prices.find((p) => p.id === priceId);
if (!price) {
return;
@ -285,22 +205,30 @@ export default function CuttingEdit({ cutting, rawMaterials }: Props) {
const comboIndex = combinations.length;
const comboMaterialData = rawMaterials.find((m) => m.name === comboMaterialName);
const variants = comboMaterialData ? (fetchedVariants.get(comboMaterialData.id) ?? []) : [];
const newMaterials: MaterialState[] = comboSelectedPriceIds.map((priceId) => {
const price = variants.find((p) => p.id === priceId);
let foundMaterial: (typeof rawMaterials)[number] | undefined;
let foundPrice: (typeof rawMaterials)[number]['raw_material_prices'][number] | undefined;
for (const rm of rawMaterials) {
const p = rm.raw_material_prices.find((pp) => pp.id === priceId);
if (p) {
foundMaterial = rm;
foundPrice = p;
break;
}
}
return {
raw_material_price_id: priceId,
material_usage: '0',
material_result: 0,
combination_id: comboIndex,
variant: price?.variant ?? '',
material_name: comboMaterialData?.name ?? '',
unit: comboMaterialData?.unit ?? '',
photo_url: price?.photo_url ?? null,
photo_conversion_url: price?.photo_conversion_url ?? null,
variant: foundPrice?.variant ?? '',
material_name: foundMaterial?.name ?? '',
unit: foundMaterial?.unit ?? '',
photo_url: foundPrice?.photo_url ?? null,
photo_conversion_url: foundPrice?.photo_conversion_url ?? null,
};
});
@ -316,7 +244,7 @@ export default function CuttingEdit({ cutting, rawMaterials }: Props) {
setComboMaterialName('');
setComboSelectedPriceIds([]);
setComboResult(0);
}, [comboSelectedPriceIds, comboResult, rawMaterials, fetchedVariants, comboMaterialName, combinations.length]);
}, [comboSelectedPriceIds, comboResult, rawMaterials, combinations.length]);
const updateMaterial = useCallback(
(index: number, field: keyof MaterialState, value: unknown) => {
@ -440,7 +368,7 @@ export default function CuttingEdit({ cutting, rawMaterials }: Props) {
<div key={rm.id} className="space-y-2">
<p className="text-xs font-semibold text-muted-foreground uppercase">{rm.name} ({rm.unit})</p>
<div className="space-y-2">
{selectedMaterialVariants.filter((p) => p.variant.toLowerCase().includes(variantSearch.toLowerCase())).map((price) => {
{rm.raw_material_prices.map((price) => {
const isAdded = materials.some((m) => m.raw_material_price_id === price.id);
const addedCount = materials.filter((m) => m.raw_material_price_id === price.id).length;
@ -483,19 +411,10 @@ export default function CuttingEdit({ cutting, rawMaterials }: Props) {
<p className="text-sm text-muted-foreground">Tidak ada varian ditemukan.</p>
)}
{!variantSearch && selectedMaterial && (
{!variantSearch && selectedMaterial && selectedMaterial.raw_material_prices.length > 0 && (
<div className="space-y-2">
{loadingVariants ? (
<div className="flex items-center justify-center py-8 text-sm text-muted-foreground">
Memuat varian...
</div>
) : selectedMaterialVariants.length === 0 ? (
<div className="flex items-center justify-center py-8 text-sm text-muted-foreground">
Tidak ada varian ditemukan.
</div>
) : (
<div className="space-y-2">
{selectedMaterialVariants.map((price) => {
{selectedMaterial.raw_material_prices.map((price) => {
const isAdded = materials.some((m) => m.raw_material_price_id === price.id);
const addedCount = materials.filter((m) => m.raw_material_price_id === price.id).length;
@ -529,7 +448,6 @@ export default function CuttingEdit({ cutting, rawMaterials }: Props) {
);
})}
</div>
)}
</div>
)}
</CardContent>
@ -798,10 +716,20 @@ export default function CuttingEdit({ cutting, rawMaterials }: Props) {
<Label className="text-sm font-medium">Varian Dipilih</Label>
<div className="space-y-1">
{comboSelectedPriceIds.map((priceId) => {
const p = comboMaterialVariants.find((pp) => pp.id === priceId);
const variantName = p?.variant ?? '';
const materialName = comboMaterialName;
const photoUrl = p?.photo_conversion_url ?? p?.photo_url ?? null;
let variantName = '';
let materialName = '';
let photoUrl: string | null = null;
for (const rm of rawMaterials) {
const p = rm.raw_material_prices.find((pp) => pp.id === priceId);
if (p) {
variantName = p.variant;
materialName = rm.name;
photoUrl = p.photo_conversion_url ?? p.photo_url;
break;
}
}
return (
<div key={priceId} className="flex items-center justify-between gap-2 rounded-md border border-primary bg-primary/5 px-3 py-2">
@ -826,11 +754,11 @@ export default function CuttingEdit({ cutting, rawMaterials }: Props) {
</div>
)}
{comboMaterial && comboMaterialVariants.length > 0 && (
{comboMaterial && comboMaterial.raw_material_prices.length > 0 && (
<div className="space-y-2">
<Label className="text-sm font-medium">Pilih Varian</Label>
<div className="space-y-2">
{comboMaterialVariants.map((price) => {
{comboMaterial.raw_material_prices.map((price) => {
const isSelected = comboSelectedPriceIds.includes(price.id);
return (

View File

@ -79,7 +79,6 @@ export type PurchaseForEdit = {
default_mode: 'new' | 'existing';
existing_material_name: string | null;
existing_quantities: Record<string, number>;
existing_material_ids: number[];
};
export type Supplier = {
@ -93,15 +92,14 @@ export type PurchaseCreateData = {
id: number;
name: string;
unit: string;
is_active: boolean;
raw_material_prices: {
id: number;
variant: string;
price: number;
stock: number;
photo_url: string | null;
photo_conversion_url: string | null;
}[];
}[];
};
export type RawMaterialVariant = {
id: number;
raw_material_id: number;
variant: string;
price: number;
stock: number;
photo_url: string | null;
photo_conversion_url: string | null;
};

View File

@ -11,12 +11,13 @@ import {
ShoppingCart,
Trash2,
} from 'lucide-react';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { useCallback, useMemo, useRef, useState } from 'react';
import { toast } from 'sonner';
import { ConfirmDialog } from '@/components/dialogs';
import { FileUpload, FileUploadMultiple } from '@/components/inputs';
import { ImagePreviewModal } from '@/components/dialogs';
import { InputError } from '@/components/ui';
import { NumberInput } from '@/components/inputs';
import { RupiahInput } from '@/components/inputs';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
@ -47,12 +48,12 @@ import { loadPurchaseDraft } from '@/lib/purchase-draft';
import { getTemporaryUrl } from '@/lib/upload';
import { formatCurrency } from '@/lib/utils';
import { index as purchaseIndex, store } from '@/routes/admin/manage/purchases';
import type { PurchaseCreateData, RawMaterialVariant } from './columns';
import type { PurchaseCreateData } from './columns';
type VariantState = {
variant: string;
price: number;
stock: string;
stock: number;
photo: string | null;
photoUrl: string | null;
uploading: boolean;
@ -64,15 +65,15 @@ type CartLine = {
title: string;
subtitle: string;
price: number;
quantity: string;
quantity: number;
onAdjust: (delta: number) => void;
onSet: (value: string) => void;
onSet: (value: number) => void;
onRemove: () => void;
};
type Props = {
suppliers: PurchaseCreateData['suppliers'];
rawMaterials: { id: number; name: string; unit: string }[];
rawMaterials: PurchaseCreateData['rawMaterials'];
};
export default function PurchaseCreate({ suppliers, rawMaterials }: Props) {
@ -88,7 +89,7 @@ export default function PurchaseCreate({ suppliers, rawMaterials }: Props) {
return draft.variants.map((v) => ({
variant: v.variant,
price: v.price,
stock: String(v.stock),
stock: v.stock,
photo: v.photo ?? null,
photoUrl: v.photo ? getTemporaryUrl(v.photo) : null,
uploading: false,
@ -99,7 +100,7 @@ export default function PurchaseCreate({ suppliers, rawMaterials }: Props) {
{
variant: '',
price: 0,
stock: '0',
stock: 0,
photo: null,
photoUrl: null,
uploading: false,
@ -128,14 +129,11 @@ export default function PurchaseCreate({ suppliers, rawMaterials }: Props) {
const [selectedMaterialName, setSelectedMaterialName] = useState(
draft?.selectedMaterialName ?? '',
);
const [fetchedVariants, setFetchedVariants] = useState<Map<number, RawMaterialVariant[]>>(new Map());
const [loadingVariants, setLoadingVariants] = useState(false);
const [quantities, setQuantities] = useState<Record<number, string>>(() =>
const [quantities, setQuantities] = useState<Record<number, number>>(() =>
Object.fromEntries(
Object.entries(draft?.quantities ?? {}).map(([id, qty]) => [
Number(id),
String(qty),
qty,
]),
),
);
@ -187,39 +185,38 @@ export default function PurchaseCreate({ suppliers, rawMaterials }: Props) {
const variantsRef = useRef(variants);
variantsRef.current = variants;
const priceMap = useMemo(() => {
const map = new Map<number, RawMaterialVariant & { materialName: string; materialUnit: string }>();
for (const [materialId, variants] of fetchedVariants) {
const material = rawMaterials.find((m) => m.id === materialId);
if (!material) continue;
for (const p of variants) {
map.set(p.id, { ...p, materialName: material.name, materialUnit: material.unit });
}
}
return map;
}, [fetchedVariants, rawMaterials]);
const priceMap = useMemo(
() =>
new Map(
rawMaterials.flatMap((m) =>
m.raw_material_prices.map((p) => [p.id, p]),
),
),
[rawMaterials],
);
const materialByPriceId = useMemo(() => {
const map = new Map<number, { name: string; unit: string }>();
for (const [materialId, variants] of fetchedVariants) {
const material = rawMaterials.find((m) => m.id === materialId);
if (!material) continue;
for (const p of variants) {
map.set(p.id, { name: material.name, unit: material.unit });
}
}
return map;
}, [fetchedVariants, rawMaterials]);
const materialByPriceId = useMemo(
() =>
new Map(
rawMaterials.flatMap((m) =>
m.raw_material_prices.map((p) => [
p.id,
{ name: m.name, unit: m.unit },
]),
),
),
[rawMaterials],
);
const newSubtotal = variants.reduce(
(sum, v) => sum + Number(v.price) * (parseFloat(v.stock) || 0),
(sum, v) => sum + Number(v.price) * Number(v.stock),
0,
);
const existingSubtotal = Object.entries(quantities).reduce(
(sum, [priceId, quantity]) => {
const price = priceMap.get(Number(priceId));
return sum + (price ? price.price * (parseFloat(quantity) || 0) : 0);
return sum + (price ? price.price * quantity : 0);
},
0,
);
@ -232,7 +229,7 @@ export default function PurchaseCreate({ suppliers, rawMaterials }: Props) {
{
variant: '',
price: 0,
stock: '0',
stock: 0,
photo: null,
photoUrl: null,
uploading: false,
@ -315,42 +312,17 @@ export default function PurchaseCreate({ suppliers, rawMaterials }: Props) {
[rawMaterials, selectedMaterialName],
);
const selectedMaterialVariants = useMemo(
() => (selectedMaterial ? fetchedVariants.get(selectedMaterial.id) ?? [] : []),
[selectedMaterial, fetchedVariants],
);
useEffect(() => {
if (!selectedMaterial || mode !== 'existing') return;
if (fetchedVariants.has(selectedMaterial.id)) return;
setLoadingVariants(true);
fetch(`/admin/master/raw-materials/${selectedMaterial.id}/variants`)
.then((res) => res.json())
.then((data) => {
setFetchedVariants((prev) => {
const next = new Map(prev);
next.set(selectedMaterial.id, data.variants);
return next;
});
})
.catch(() => {
toast.error('Gagal memuat varian bahan baku.');
})
.finally(() => setLoadingVariants(false));
}, [selectedMaterial, mode, fetchedVariants]);
const updateQuantity = useCallback((priceId: number, value: string) => {
const updateQuantity = useCallback((priceId: number, value: number) => {
setQuantities((prev) => ({
...prev,
[priceId]: value,
[priceId]: Math.max(0, value),
}));
}, []);
const incrementQuantity = useCallback((priceId: number, amount: number) => {
setQuantities((prev) => ({
...prev,
[priceId]: String(Math.max(0, (parseFloat(prev[priceId]) || 0) + amount)),
[priceId]: Math.max(0, (prev[priceId] ?? 0) + amount),
}));
}, []);
@ -359,7 +331,7 @@ export default function PurchaseCreate({ suppliers, rawMaterials }: Props) {
const updated = [...prev];
updated[index] = {
...updated[index],
stock: String(Math.max(0, (parseFloat(updated[index].stock) || 0) + amount)),
stock: Math.max(0, Number(updated[index].stock) + amount),
};
return updated;
@ -371,7 +343,7 @@ export default function PurchaseCreate({ suppliers, rawMaterials }: Props) {
const lines: CartLine[] = [];
for (const [priceId, quantity] of Object.entries(quantities)) {
if ((parseFloat(quantity) || 0) <= 0) {
if (quantity <= 0) {
continue;
}
@ -389,7 +361,7 @@ export default function PurchaseCreate({ suppliers, rawMaterials }: Props) {
quantity,
onAdjust: (delta) => incrementQuantity(id, delta),
onSet: (value) => updateQuantity(id, value),
onRemove: () => updateQuantity(id, '0'),
onRemove: () => updateQuantity(id, 0),
});
}
}
@ -409,7 +381,7 @@ export default function PurchaseCreate({ suppliers, rawMaterials }: Props) {
onSet: (value) => updateVariant(index, 'stock', value),
onRemove: () => removeVariant(index),
}))
.filter((line) => (parseFloat(line.quantity) || 0) > 0);
.filter((line) => line.quantity > 0);
})();
function formatQuantity(value: number): string {
@ -432,7 +404,7 @@ export default function PurchaseCreate({ suppliers, rawMaterials }: Props) {
existing_items: Object.entries(quantities)
.map(([priceId, quantity]) => ({
raw_material_price_id: Number(priceId),
quantity: parseFloat(quantity) || 0,
quantity: Number(quantity),
unit_price: priceMap.get(Number(priceId))?.price ?? 0,
}))
.filter((item) => item.quantity > 0),
@ -446,7 +418,7 @@ export default function PurchaseCreate({ suppliers, rawMaterials }: Props) {
variants: variantsRef.current.map((v) => ({
variant: v.variant,
price: Number(v.price),
stock: parseFloat(v.stock) || 0,
stock: Number(v.stock),
photo_key: v.photo,
})),
};
@ -726,19 +698,17 @@ export default function PurchaseCreate({ suppliers, rawMaterials }: Props) {
*
</span>
</Label>
<Input
type="text"
inputMode="decimal"
<NumberInput
value={
variant.stock
}
onChange={(
e,
onValueChange={(
val,
) =>
updateVariant(
variantIndex,
'stock',
e.target.value,
val,
)
}
/>
@ -888,29 +858,19 @@ export default function PurchaseCreate({ suppliers, rawMaterials }: Props) {
{selectedMaterial && (
<div className="space-y-2">
{loadingVariants ? (
<div className="flex items-center justify-center py-8 text-sm text-muted-foreground">
Memuat varian...
</div>
) : selectedMaterialVariants.length === 0 ? (
<div className="flex items-center justify-center py-8 text-sm text-muted-foreground">
Tidak ada varian ditemukan.
</div>
) : selectedMaterialVariants.map(
{selectedMaterial.raw_material_prices.map(
(price) => (
<div
key={
price.id
}
className={
(parseFloat(
quantities[
price
.id
] ??
'0',
) >
0)
(quantities[
price
.id
] ??
0) >
0
? 'flex flex-wrap items-center justify-between gap-2 rounded-lg border border-primary p-3'
: 'flex flex-wrap items-center justify-between gap-2 rounded-lg border p-3'
}
@ -961,13 +921,11 @@ export default function PurchaseCreate({ suppliers, rawMaterials }: Props) {
size="icon"
disabled={
!(
parseFloat(
quantities[
price
.id
] ??
'0',
) > 0
quantities[
price
.id
] ??
0
)
}
onClick={() =>
@ -979,23 +937,21 @@ export default function PurchaseCreate({ suppliers, rawMaterials }: Props) {
>
<Minus className="h-4 w-4" />
</Button>
<Input
type="text"
inputMode="decimal"
<NumberInput
className="w-24 text-center"
value={
quantities[
price
.id
] ??
'0'
0
}
onChange={(
e,
onValueChange={(
val,
) =>
updateQuantity(
price.id,
e.target.value,
val,
)
}
/>
@ -1173,7 +1129,7 @@ export default function PurchaseCreate({ suppliers, rawMaterials }: Props) {
(mode === 'existing'
? Object.values(
quantities,
).every((q) => (parseFloat(q) || 0) <= 0)
).every((q) => q <= 0)
: !name)
}
>
@ -1270,7 +1226,7 @@ export default function PurchaseCreate({ suppliers, rawMaterials }: Props) {
variant="outline"
size="icon-sm"
disabled={
(parseFloat(item.quantity) || 0) <= 0
item.quantity <= 0
}
onClick={() =>
item.onAdjust(-1)
@ -1278,12 +1234,10 @@ export default function PurchaseCreate({ suppliers, rawMaterials }: Props) {
>
<Minus className="h-4 w-4" />
</Button>
<Input
type="text"
inputMode="decimal"
<NumberInput
className="w-20 text-center"
value={item.quantity}
onChange={(e) => item.onSet(e.target.value)}
onValueChange={item.onSet}
/>
<Button
type="button"
@ -1299,7 +1253,7 @@ export default function PurchaseCreate({ suppliers, rawMaterials }: Props) {
<div className="text-right">
<span className="text-xs font-medium text-muted-foreground">
{formatCurrency(
item.price * (parseFloat(item.quantity) || 0),
item.price * item.quantity,
)}
</span>
</div>

View File

@ -8,12 +8,13 @@ import {
ShoppingCart,
Trash2,
} from 'lucide-react';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { useCallback, useMemo, useState } from 'react';
import { toast } from 'sonner';
import { ConfirmDialog } from '@/components/dialogs';
import { FileUploadMultiple } from '@/components/inputs';
import { ImagePreviewModal } from '@/components/dialogs';
import { InputError } from '@/components/ui';
import { NumberInput } from '@/components/inputs';
import { RupiahInput } from '@/components/inputs';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
@ -26,7 +27,6 @@ import {
ComboboxList,
} from '@/components/ui/combobox';
import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
import {
Sheet,
SheetContent,
@ -36,13 +36,12 @@ import {
} from '@/components/ui/sheet';
import { Textarea } from '@/components/ui/textarea';
import { formatNumber } from '@/lib/format';
import { getTemporaryUrl } from '@/lib/upload';
import { formatCurrency } from '@/lib/utils';
import {
index as purchaseIndex,
update,
} from '@/routes/admin/manage/purchases';
import type { PurchaseCreateData, PurchaseForEdit, RawMaterialVariant } from './columns';
import type { PurchaseCreateData, PurchaseForEdit } from './columns';
type CartLine = {
key: string;
@ -50,16 +49,16 @@ type CartLine = {
title: string;
subtitle: string;
price: number;
quantity: string;
quantity: number;
onAdjust: (delta: number) => void;
onSet: (value: string) => void;
onSet: (value: number) => void;
onRemove: () => void;
};
type Props = {
purchase: PurchaseForEdit;
suppliers: PurchaseCreateData['suppliers'];
rawMaterials: { id: number; name: string; unit: string }[];
rawMaterials: PurchaseCreateData['rawMaterials'];
};
export default function PurchaseEdit({
@ -85,11 +84,11 @@ export default function PurchaseEdit({
});
const [uploading, setUploading] = useState(false);
const [quantities, setQuantities] = useState<Record<number, string>>(() =>
const [quantities, setQuantities] = useState<Record<number, number>>(() =>
Object.fromEntries(
Object.entries(purchase.existing_quantities).map(([id, qty]) => [
Number(id),
String(qty),
qty,
]),
),
);
@ -97,68 +96,34 @@ export default function PurchaseEdit({
const [previewKey, setPreviewKey] = useState<string | null>(null);
const [cartRemoveKey, setCartRemoveKey] = useState<string | null>(null);
const [fetchedVariants, setFetchedVariants] = useState<Map<number, RawMaterialVariant[]>>(new Map());
const [loadingVariants, setLoadingVariants] = useState(false);
useEffect(() => {
const materialIds = purchase.existing_material_ids ?? [];
if (materialIds.length === 0) return;
const toFetch = materialIds.filter((id) => !fetchedVariants.has(id));
if (toFetch.length === 0) return;
setLoadingVariants(true);
Promise.all(
toFetch.map((id) =>
fetch(`/admin/master/raw-materials/${id}/variants`)
.then((res) => res.json())
.then((data) => [id, data.variants] as const)
const priceMap = useMemo(
() =>
new Map(
rawMaterials.flatMap((m) =>
m.raw_material_prices.map((p) => [p.id, p]),
),
),
)
.then((results) => {
setFetchedVariants((prev) => {
const next = new Map(prev);
for (const [id, variants] of results) {
next.set(id, variants);
}
return next;
});
})
.catch(() => {
toast.error('Gagal memuat varian bahan baku.');
})
.finally(() => setLoadingVariants(false));
}, [purchase.existing_material_ids]);
[rawMaterials],
);
const priceMap = useMemo(() => {
const map = new Map<number, RawMaterialVariant & { materialName: string; materialUnit: string }>();
for (const [materialId, variants] of fetchedVariants) {
const material = rawMaterials.find((m) => m.id === materialId);
if (!material) continue;
for (const p of variants) {
map.set(p.id, { ...p, materialName: material.name, materialUnit: material.unit });
}
}
return map;
}, [fetchedVariants, rawMaterials]);
const materialByPriceId = useMemo(() => {
const map = new Map<number, { name: string; unit: string }>();
for (const [materialId, variants] of fetchedVariants) {
const material = rawMaterials.find((m) => m.id === materialId);
if (!material) continue;
for (const p of variants) {
map.set(p.id, { name: material.name, unit: material.unit });
}
}
return map;
}, [fetchedVariants, rawMaterials]);
const materialByPriceId = useMemo(
() =>
new Map(
rawMaterials.flatMap((m) =>
m.raw_material_prices.map((p) => [
p.id,
{ name: m.name, unit: m.unit },
]),
),
),
[rawMaterials],
);
const subtotal = Object.entries(quantities).reduce(
(sum, [priceId, quantity]) => {
const price = priceMap.get(Number(priceId));
return sum + (price ? price.price * (parseFloat(quantity) || 0) : 0);
return sum + (price ? price.price * quantity : 0);
},
0,
);
@ -193,17 +158,17 @@ export default function PurchaseEdit({
const isMultiMaterial = purchasedVariantsByMaterial.size > 1;
const updateQuantity = useCallback((priceId: number, value: string) => {
const updateQuantity = useCallback((priceId: number, value: number) => {
setQuantities((prev) => ({
...prev,
[priceId]: value,
[priceId]: Math.max(0, value),
}));
}, []);
const incrementQuantity = useCallback((priceId: number, amount: number) => {
setQuantities((prev) => ({
...prev,
[priceId]: String(Math.max(0, (parseFloat(prev[priceId]) || 0) + amount)),
[priceId]: Math.max(0, (prev[priceId] ?? 0) + amount),
}));
}, []);
@ -211,7 +176,7 @@ export default function PurchaseEdit({
const lines: CartLine[] = [];
for (const [priceId, quantity] of Object.entries(quantities)) {
if ((parseFloat(quantity) || 0) <= 0) {
if (quantity <= 0) {
continue;
}
@ -229,7 +194,7 @@ export default function PurchaseEdit({
quantity,
onAdjust: (delta) => incrementQuantity(id, delta),
onSet: (value) => updateQuantity(id, value),
onRemove: () => updateQuantity(id, '0'),
onRemove: () => updateQuantity(id, 0),
});
}
}
@ -252,7 +217,7 @@ export default function PurchaseEdit({
existing_items: Object.entries(quantities)
.map(([priceId, quantity]) => ({
raw_material_price_id: Number(priceId),
quantity: parseFloat(quantity) || 0,
quantity: Number(quantity),
unit_price: priceMap.get(Number(priceId))?.price ?? 0,
}))
.filter((item) => item.quantity > 0),
@ -338,7 +303,7 @@ export default function PurchaseEdit({
variant="outline"
size="icon"
disabled={
(parseFloat(quantities[price.id] ?? '0') || 0) <= 0
(quantities[price.id] ?? 0) <= 0
}
onClick={() =>
incrementQuantity(price.id, -1)
@ -346,13 +311,11 @@ export default function PurchaseEdit({
>
<Minus className="h-4 w-4" />
</Button>
<Input
type="text"
inputMode="decimal"
<NumberInput
className="w-24 text-center"
value={quantities[price.id] ?? '0'}
onChange={(e) =>
updateQuantity(price.id, e.target.value)
value={quantities[price.id] ?? 0}
onValueChange={(val) =>
updateQuantity(price.id, val)
}
/>
<Button
@ -519,7 +482,7 @@ export default function PurchaseEdit({
!supplierId ||
Object.values(
quantities,
).every((q) => (parseFloat(q) || 0) <= 0)
).every((q) => q <= 0)
}
>
{processing
@ -615,7 +578,7 @@ export default function PurchaseEdit({
variant="outline"
size="icon-sm"
disabled={
(parseFloat(item.quantity) || 0) <= 0
item.quantity <= 0
}
onClick={() =>
item.onAdjust(-1)
@ -623,12 +586,10 @@ export default function PurchaseEdit({
>
<Minus className="h-4 w-4" />
</Button>
<Input
type="text"
inputMode="decimal"
<NumberInput
className="w-20 text-center"
value={item.quantity}
onChange={(e) => item.onSet(e.target.value)}
onValueChange={item.onSet}
/>
<Button
type="button"
@ -644,7 +605,7 @@ export default function PurchaseEdit({
<div className="text-right">
<span className="text-xs font-medium text-muted-foreground">
{formatCurrency(
item.price * (parseFloat(item.quantity) || 0),
item.price * item.quantity,
)}
</span>
</div>

View File

@ -45,7 +45,6 @@ export type RestockForEdit = {
notes: string | null;
photo_key: string | null;
photo_url: string | null;
existing_product_ids: number[];
items: {
id: number;
product_variant_id: number;
@ -54,19 +53,19 @@ export type RestockForEdit = {
}[];
};
export type ProductVariantForRestock = {
id: number;
name: string;
stock: number;
reject_stock: number;
photo_url: string | null;
capital_price: number;
reject_price: number;
};
export type ProductForRestock = {
id: number;
name: string;
status: string;
product_variants: {
id: number;
name: string;
stock: number;
reject_stock: number;
photo_url: string | null;
capital_price: number;
reject_price: number;
}[];
};
export type RestockCreateData = {

View File

@ -35,7 +35,7 @@ import { loadRestockDraft } from '@/lib/restock-draft';
import { getTemporaryUrl } from '@/lib/upload';
import { formatCurrency } from '@/lib/utils';
import { index as restockIndex, store } from '@/routes/admin/manage/restocks';
import type { ProductForRestock, ProductVariantForRestock, RestockCreateData } from './columns';
import type { ProductForRestock, RestockCreateData } from './columns';
type CartLine = {
key: string;
@ -82,8 +82,6 @@ export default function RestockCreate({ products }: Props) {
const [cartOpen, setCartOpen] = useState(false);
const [previewKey, setPreviewKey] = useState<string | null>(null);
const [cartRemoveKey, setCartRemoveKey] = useState<string | null>(null);
const [fetchedVariants, setFetchedVariants] = useState<Map<number, ProductVariantForRestock[]>>(new Map());
const [loadingVariants, setLoadingVariants] = useState(false);
const draftData = useMemo(
() => ({
@ -114,54 +112,16 @@ export default function RestockCreate({ products }: Props) {
[products, selectedProductId],
);
const selectedProductVariants = useMemo(
() => (selectedProduct ? fetchedVariants.get(selectedProduct.id) ?? [] : []),
[selectedProduct, fetchedVariants],
const variantById = useMemo(
() =>
new Map(
products.flatMap((p: ProductForRestock) =>
p.product_variants.map((v) => [v.id, v]),
),
),
[products],
);
useEffect(() => {
if (!selectedProduct) return;
if (fetchedVariants.has(selectedProduct.id)) return;
setLoadingVariants(true);
fetch(`/admin/master/products/${selectedProduct.id}/variants`)
.then((res) => res.json())
.then((data) => {
setFetchedVariants((prev) => {
const next = new Map(prev);
next.set(selectedProduct.id, data.variants);
return next;
});
})
.catch(() => {
toast.error('Gagal memuat varian produk.');
})
.finally(() => setLoadingVariants(false));
}, [selectedProduct, fetchedVariants]);
const variantById = useMemo(() => {
const map = new Map<number, ProductVariantForRestock>();
for (const [, variants] of fetchedVariants) {
for (const v of variants) {
map.set(v.id, v);
}
}
return map;
}, [fetchedVariants]);
const productByVariantId = useMemo(() => {
const map = new Map<number, string>();
for (const [productId, variants] of fetchedVariants) {
const product = products.find((p) => p.id === productId);
if (product) {
for (const v of variants) {
map.set(v.id, product.name);
}
}
}
return map;
}, [fetchedVariants, products]);
const getUnitPrice = useCallback(
(variantId: number) => {
const variant = variantById.get(variantId);
@ -334,16 +294,7 @@ return 0;
{selectedProduct && (
<div className="space-y-2">
{loadingVariants ? (
<div className="flex items-center justify-center py-8 text-sm text-muted-foreground">
Memuat varian...
</div>
) : selectedProductVariants.length === 0 ? (
<div className="flex items-center justify-center py-8 text-sm text-muted-foreground">
Tidak ada varian ditemukan.
</div>
) : (
selectedProductVariants.map(
{selectedProduct.product_variants.map(
(variant) => {
const currentStock =
stockType === 'good'
@ -459,7 +410,7 @@ return 0;
</div>
);
},
))}
)}
</div>
)}
</CardContent>

View File

@ -25,7 +25,7 @@ import { formatNumber } from '@/lib/format';
import { getTemporaryUrl } from '@/lib/upload';
import { formatCurrency } from '@/lib/utils';
import { index as restockIndex, update } from '@/routes/admin/manage/restocks';
import type { RestockCreateData, RestockForEdit, ProductVariantForRestock } from './columns';
import type { RestockCreateData, RestockForEdit } from './columns';
type CartLine = {
key: string;
@ -49,13 +49,16 @@ export default function RestockEdit({ restock, products }: Props) {
const [stockType, setStockType] = useState<'good' | 'reject'>(
restock.stock_type === 'reject' ? 'reject' : 'good',
);
const [selectedProductId, setSelectedProductId] = useState(() => {
const selectedProductId = useMemo(() => {
const items = restock.items ?? [];
const product = products.find((p) =>
restock.existing_product_ids?.includes(p.id),
p.product_variants.some((v) =>
items.some((i) => i.product_variant_id === v.id),
),
);
return product ? String(product.id) : '';
});
}, [products, restock.items]);
const [quantities, setQuantities] = useState<Record<number, number>>(() =>
Object.fromEntries(
(restock.items ?? []).map((item) => [
@ -71,8 +74,6 @@ export default function RestockEdit({ restock, products }: Props) {
const [cartOpen, setCartOpen] = useState(false);
const [previewKey, setPreviewKey] = useState<string | null>(null);
const [cartRemoveKey, setCartRemoveKey] = useState<string | null>(null);
const [fetchedVariants, setFetchedVariants] = useState<Map<number, ProductVariantForRestock[]>>(() => new Map());
const [loadingVariants, setLoadingVariants] = useState(false);
const quantitiesRef = useRef(quantities);
@ -85,84 +86,25 @@ export default function RestockEdit({ restock, products }: Props) {
[products, selectedProductId],
);
const selectedProductVariants = useMemo(
() => (selectedProduct ? fetchedVariants.get(selectedProduct.id) ?? [] : []),
[selectedProduct, fetchedVariants],
const variantById = useMemo(
() =>
new Map(
products.flatMap((p) =>
p.product_variants.map((v) => [v.id, v]),
),
),
[products],
);
useEffect(() => {
if (!selectedProduct) return;
if (fetchedVariants.has(selectedProduct.id)) return;
setLoadingVariants(true);
fetch(`/admin/master/products/${selectedProduct.id}/variants`)
.then((res) => res.json())
.then((data) => {
setFetchedVariants((prev) => {
const next = new Map(prev);
next.set(selectedProduct.id, data.variants);
return next;
});
})
.catch(() => {
toast.error('Gagal memuat varian produk.');
})
.finally(() => setLoadingVariants(false));
}, [selectedProduct, fetchedVariants]);
useEffect(() => {
if (!restock.existing_product_ids?.length) return;
const toFetch = restock.existing_product_ids.filter(
(id) => !fetchedVariants.has(id),
);
if (toFetch.length === 0) return;
setLoadingVariants(true);
Promise.all(
toFetch.map((id) =>
fetch(`/admin/master/products/${id}/variants`)
.then((res) => res.json())
.then((data) => ({ id, variants: data.variants })),
const productByVariantId = useMemo(
() =>
new Map(
products.flatMap((p) =>
p.product_variants.map((v) => [v.id, p.name]),
),
),
)
.then((results) => {
setFetchedVariants((prev) => {
const next = new Map(prev);
for (const { id, variants } of results) {
next.set(id, variants);
}
return next;
});
})
.catch(() => {
toast.error('Gagal memuat varian produk.');
})
.finally(() => setLoadingVariants(false));
}, [restock.existing_product_ids]);
const variantById = useMemo(() => {
const map = new Map<number, ProductVariantForRestock>();
for (const [, variants] of fetchedVariants) {
for (const v of variants) {
map.set(v.id, v);
}
}
return map;
}, [fetchedVariants]);
const productByVariantId = useMemo(() => {
const map = new Map<number, string>();
for (const [productId, variants] of fetchedVariants) {
const product = products.find((p) => p.id === productId);
if (product) {
for (const v of variants) {
map.set(v.id, product.name);
}
}
}
return map;
}, [fetchedVariants, products]);
[products],
);
const getUnitPrice = useCallback(
(variantId: number) => {
@ -290,16 +232,7 @@ return 0;
<CardContent className="space-y-4">
{selectedProduct ? (
<div className="space-y-2">
{loadingVariants ? (
<div className="flex items-center justify-center py-8 text-sm text-muted-foreground">
Memuat varian...
</div>
) : selectedProductVariants.length === 0 ? (
<div className="flex items-center justify-center py-8 text-sm text-muted-foreground">
Tidak ada varian ditemukan.
</div>
) : (
selectedProductVariants.map(
{selectedProduct.product_variants.map(
(variant) => {
const currentStock =
stockType === 'good'
@ -415,14 +348,13 @@ return 0;
</div>
);
},
)
)}
</div>
) : (
<p className="text-sm text-muted-foreground">
Tidak ada item.
</p>
)}
)}
</div>
) : (
<p className="text-sm text-muted-foreground">
Tidak ada item.
</p>
)}
<InputError message={errors.items} />
</CardContent>
</Card>

View File

@ -98,24 +98,21 @@ export type TransactionForEdit = {
quantity: number;
unit_price: number;
}[];
existing_product_ids: number[];
};
export type ProductForTransaction = {
id: number;
name: string;
};
export type ProductVariantForTransaction = {
id: number;
product_id: number;
name: string;
stock: number;
reject_stock: number;
retail_stock: number;
photo_url: string | null;
photo_conversion_url: string | null;
prices: Record<string, number>;
status: string;
product_variants: {
id: number;
name: string;
stock: number;
reject_stock: number;
retail_stock: number;
photo_url: string | null;
prices: Record<string, number>;
}[];
};
export type CustomerForTransaction = {

View File

@ -47,7 +47,7 @@ import { loadTransactionDraft } from '@/lib/transaction-draft';
import { getTemporaryUrl } from '@/lib/upload';
import { formatCurrency } from '@/lib/utils';
import { store, index as transactionIndex } from '@/routes/admin/manage/transactions';
import type { ProductForTransaction, ProductVariantForTransaction, TransactionCreateData } from './columns';
import type { ProductForTransaction, TransactionCreateData } from './columns';
type CartLine = {
key: string;
@ -119,8 +119,6 @@ export default function TransactionCreate({
const [tiktokOrderId, setTiktokOrderId] = useState(draft?.tiktokOrderId ?? '');
const [shopeeOrderId, setShopeeOrderId] = useState(draft?.shopeeOrderId ?? '');
const [variantSearch, setVariantSearch] = useState('');
const [fetchedVariants, setFetchedVariants] = useState<Map<number, ProductVariantForTransaction[]>>(new Map());
const [loadingVariants, setLoadingVariants] = useState(false);
const quantitiesRef = useRef(quantities);
@ -166,64 +164,38 @@ export default function TransactionCreate({
[products, selectedProductId],
);
const selectedProductVariants = useMemo(
() => (selectedProduct ? fetchedVariants.get(selectedProduct.id) ?? [] : []),
[selectedProduct, fetchedVariants],
);
useEffect(() => {
if (!selectedProduct) return;
if (fetchedVariants.has(selectedProduct.id)) return;
setLoadingVariants(true);
fetch(`/admin/master/products/${selectedProduct.id}/variants`)
.then((res) => res.json())
.then((data) => {
setFetchedVariants((prev) => {
const next = new Map(prev);
next.set(selectedProduct.id, data.variants);
return next;
});
})
.catch(() => {
toast.error('Gagal memuat varian produk.');
})
.finally(() => setLoadingVariants(false));
}, [selectedProduct, fetchedVariants]);
const groupedVariants = useMemo(() => {
if (!variantSearch) return [];
if (!selectedProduct) return [];
const search = variantSearch.toLowerCase();
return [{
...selectedProduct,
product_variants: selectedProductVariants.filter((v) =>
v.name.toLowerCase().includes(search),
return products
.map((p) => ({
...p,
product_variants: p.product_variants.filter((v) =>
v.name.toLowerCase().includes(search),
),
}))
.filter((p) => p.product_variants.length > 0);
}, [products, variantSearch]);
const variantById = useMemo(
() =>
new Map(
products.flatMap((p: ProductForTransaction) =>
p.product_variants.map((v) => [v.id, v]),
),
),
}];
}, [selectedProduct, selectedProductVariants, variantSearch]);
[products],
);
const variantById = useMemo(() => {
const map = new Map<number, ProductVariantForTransaction>();
for (const [, variants] of fetchedVariants) {
for (const v of variants) {
map.set(v.id, v);
}
}
return map;
}, [fetchedVariants]);
const productByVariantId = useMemo(() => {
const map = new Map<number, string>();
for (const [productId, variants] of fetchedVariants) {
const product = products.find((p) => p.id === productId);
if (!product) continue;
for (const v of variants) {
map.set(v.id, product.name);
}
}
return map;
}, [fetchedVariants, products]);
const productByVariantId = useMemo(
() =>
new Map(
products.flatMap((p: ProductForTransaction) =>
p.product_variants.map((v) => [v.id, p.name]),
),
),
[products],
);
useEffect(() => {
if (channel === 'tiktok') {
@ -536,16 +508,7 @@ export default function TransactionCreate({
{!variantSearch && selectedProduct && (
<div className="space-y-2">
{loadingVariants ? (
<div className="flex items-center justify-center py-8 text-sm text-muted-foreground">
Memuat varian...
</div>
) : selectedProductVariants.length === 0 ? (
<div className="flex items-center justify-center py-8 text-sm text-muted-foreground">
Tidak ada varian ditemukan.
</div>
) : (
selectedProductVariants.map(
{selectedProduct.product_variants.map(
(variant) => {
const currentStock =
stockType === 'reject'
@ -565,10 +528,10 @@ export default function TransactionCreate({
}
>
<div className="flex min-w-0 items-center gap-3">
{variant.photo_conversion_url ?? variant.photo_url ? (
{variant.photo_url ? (
<img
src={
variant.photo_conversion_url ?? variant.photo_url
variant.photo_url
}
alt={
variant.name
@ -666,10 +629,9 @@ export default function TransactionCreate({
</div>
);
},
)
)}
</div>
)}
)}
</div>
)}
</CardContent>
</Card>
</div>

View File

@ -44,7 +44,7 @@ import { formatNumber } from '@/lib/format';
import { getTemporaryUrl } from '@/lib/upload';
import { formatCurrency } from '@/lib/utils';
import { index as transactionIndex, update } from '@/routes/admin/manage/transactions';
import type { ProductVariantForTransaction, TransactionCreateData, TransactionForEdit } from './columns';
import type { TransactionCreateData, TransactionForEdit } from './columns';
type CartLine = {
key: string;
@ -98,11 +98,15 @@ export default function TransactionEdit({
const [photo, setPhoto] = useState<string | null>(transaction.photo_key);
const [photoUrl, setPhotoUrl] = useState<string | null>(transaction.photo_url);
const [uploading, setUploading] = useState(false);
const [fetchedVariants, setFetchedVariants] = useState<Map<number, ProductVariantForTransaction[]>>(new Map());
const [loadingVariants, setLoadingVariants] = useState(false);
const [selectedProductId, setSelectedProductId] = useState(() => {
const firstProductId = transaction.existing_product_ids?.[0];
return firstProductId ? String(firstProductId) : '';
const items = transaction.items ?? [];
const product = products.find((p) =>
p.product_variants.some((v) =>
items.some((i) => i.product_variant_id === v.id),
),
);
return product ? String(product.id) : '';
});
const [quantities, setQuantities] = useState<Record<number, number>>(() =>
Object.fromEntries(
@ -152,77 +156,25 @@ export default function TransactionEdit({
[products, selectedProductId],
);
useEffect(() => {
const productIds = transaction.existing_product_ids ?? [];
if (productIds.length === 0) return;
const toFetch = productIds.filter((id) => !fetchedVariants.has(id));
if (toFetch.length === 0) return;
setLoadingVariants(true);
Promise.all(
toFetch.map((id) =>
fetch(`/admin/master/products/${id}/variants`)
.then((res) => res.json())
.then((data) => [id, data.variants] as const)
const variantById = useMemo(
() =>
new Map(
products.flatMap((p) =>
p.product_variants.map((v) => [v.id, v]),
),
),
)
.then((results) => {
setFetchedVariants((prev) => {
const next = new Map(prev);
for (const [id, variants] of results) {
next.set(id, variants);
}
return next;
});
})
.catch(() => {
toast.error('Gagal memuat varian produk.');
})
.finally(() => setLoadingVariants(false));
}, [transaction.existing_product_ids]);
[products],
);
useEffect(() => {
if (!selectedProduct) return;
if (fetchedVariants.has(selectedProduct.id)) return;
setLoadingVariants(true);
fetch(`/admin/master/products/${selectedProduct.id}/variants`)
.then((res) => res.json())
.then((data) => {
setFetchedVariants((prev) => {
const next = new Map(prev);
next.set(selectedProduct.id, data.variants);
return next;
});
})
.catch(() => {
toast.error('Gagal memuat varian produk.');
})
.finally(() => setLoadingVariants(false));
}, [selectedProduct, fetchedVariants]);
const variantById = useMemo(() => {
const map = new Map<number, ProductVariantForTransaction>();
for (const [, variants] of fetchedVariants) {
for (const v of variants) {
map.set(v.id, v);
}
}
return map;
}, [fetchedVariants]);
const productByVariantId = useMemo(() => {
const map = new Map<number, string>();
for (const [productId, variants] of fetchedVariants) {
const product = products.find((p) => p.id === productId);
if (!product) continue;
for (const v of variants) {
map.set(v.id, product.name);
}
}
return map;
}, [fetchedVariants, 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';
@ -445,16 +397,7 @@ export default function TransactionEdit({
{selectedProduct && (
<div className="space-y-2">
{loadingVariants ? (
<div className="flex items-center justify-center py-8 text-sm text-muted-foreground">
Memuat varian...
</div>
) : fetchedVariants.get(selectedProduct.id)?.length === 0 ? (
<div className="flex items-center justify-center py-8 text-sm text-muted-foreground">
Tidak ada varian ditemukan.
</div>
) : (
(fetchedVariants.get(selectedProduct.id) ?? []).map(
{selectedProduct.product_variants.map(
(variant) => {
const currentStock =
stockType === 'reject'
@ -575,10 +518,9 @@ export default function TransactionEdit({
</div>
);
},
)
)}
</div>
)}
)}
</div>
)}
</CardContent>
</Card>
</div>

View File

@ -44,7 +44,6 @@
Route::resource('categories', CategoryController::class)->except(['show', 'create', 'edit'])->middleware('permission:categories.view|categories.create|categories.update|categories.delete');
Route::resource('products', ProductController::class)->except(['show'])->middleware('permission:products.view|products.create|products.update|products.delete');
Route::get('products-active', [ProductController::class, 'activeProducts'])->name('products.active')->middleware('permission:products.view');
Route::post('products/{product}/toggle-status', [ProductController::class, 'toggleStatus'])->name('products.toggle-status')->middleware('permission:products.toggle_status');
Route::post('products/{product}/toggle-featured', [ProductController::class, 'toggleFeatured'])->name('products.toggle-featured')->middleware('permission:products.toggle_featured');
Route::post('products/{product}/approve', [ProductController::class, 'approve'])->name('products.approve')->middleware('permission:products.update');
@ -58,7 +57,6 @@
Route::get('products/{product}/variants/{variant}/stock-mutations', [StockMutationController::class, 'index'])->name('products.variants.stock-mutations')->middleware('permission:products.view_stock_mutations');
Route::resource('raw-materials', RawMaterialController::class)->except(['show'])->middleware('permission:raw_materials.view|raw_materials.create|raw_materials.update|raw_materials.delete');
Route::get('raw-materials-active', [RawMaterialController::class, 'activeMaterials'])->name('raw-materials.active')->middleware('permission:raw_materials.view');
Route::post('raw-materials/{rawMaterial}/toggle-status', [RawMaterialController::class, 'toggleStatus'])->name('raw-materials.toggle-status')->middleware('permission:raw_materials.toggle_status');
Route::get('raw-materials/{rawMaterial}/variants', [RawMaterialController::class, 'variants'])->name('raw-materials.variants')->middleware('permission:raw_materials.view');
Route::get('raw-materials/{rawMaterial}/variants/{variant}/edit', [RawMaterialVariantController::class, 'edit'])->name('raw-materials.variants.edit')->middleware('permission:raw_materials.update');