From 631330d3b49f9d8a280702f69e061e1ee575b00b Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Wed, 19 Aug 2026 18:34:52 +0700
Subject: [PATCH] feat: refactor PurchaseEdit component to streamline material
 selection and quantity handling

---
 app/Services/Admin/Manage/PurchaseService.php |  12 +-
 .../js/pages/admin/manage/purchase/edit.tsx   | 274 ++++++------------
 2 files changed, 101 insertions(+), 185 deletions(-)

diff --git a/app/Services/Admin/Manage/PurchaseService.php b/app/Services/Admin/Manage/PurchaseService.php
index a85b8ab..c5bebe2 100644
--- a/app/Services/Admin/Manage/PurchaseService.php
+++ b/app/Services/Admin/Manage/PurchaseService.php
@@ -152,6 +152,10 @@ public function getForEdit(Purchase $purchase): array
             fn ($media) => $this->s3Service->getTemporaryUrl($media->getPath())
         )->toArray();
 
+        $existingQuantities = $items->mapWithKeys(fn (PurchaseItem $item) => [
+            (int) $item->raw_material_price_id => (int) $item->quantity,
+        ])->all();
+
         return [
             'id' => $purchase->id,
             'name' => $rawMaterial?->name ?? '',
@@ -164,12 +168,8 @@ public function getForEdit(Purchase $purchase): array
             'photo_urls' => $purchasePhotoUrls,
             'variants' => $variants,
             'default_mode' => $singleMaterial && ! $sharedWithOther ? 'new' : 'existing',
-            'existing_material_name' => $singleMaterial ? $materials->first()->name : null,
-            'existing_quantities' => $singleMaterial
-                ? $items->mapWithKeys(fn (PurchaseItem $item) => [
-                    (int) $item->raw_material_price_id => (int) $item->quantity,
-                ])->all()
-                : [],
+            'existing_material_name' => $materials->first()->name ?? null,
+            'existing_quantities' => $existingQuantities,
         ];
     }
 
diff --git a/resources/js/pages/admin/manage/purchase/edit.tsx b/resources/js/pages/admin/manage/purchase/edit.tsx
index 881b896..f56cb02 100644
--- a/resources/js/pages/admin/manage/purchase/edit.tsx
+++ b/resources/js/pages/admin/manage/purchase/edit.tsx
@@ -84,9 +84,6 @@ export default function PurchaseEdit({
     });
     const [uploading, setUploading] = useState(false);
 
-    const [selectedMaterialName, setSelectedMaterialName] = useState(
-        purchase.existing_material_name ?? '',
-    );
     const [quantities, setQuantities] = useState<Record<number, number>>(() =>
         Object.fromEntries(
             Object.entries(purchase.existing_quantities).map(([id, qty]) => [
@@ -132,10 +129,34 @@ export default function PurchaseEdit({
     );
     const total = subtotal - discount + shippingCost;
 
-    const selectedMaterial = useMemo(
-        () => rawMaterials.find((m) => m.name === selectedMaterialName) ?? null,
-        [rawMaterials, selectedMaterialName],
-    );
+    const purchasedVariantsByMaterial = useMemo(() => {
+        const map = new Map<string, { name: string; unit: string; items: { id: number; variant: string; price: number; stock: number; photo_url: string | null; photo_conversion_url: string | null }[] }>();
+
+        for (const [priceId, quantity] of Object.entries(quantities)) {
+            const id = Number(priceId);
+            const price = priceMap.get(id);
+            const material = materialByPriceId.get(id);
+
+            if (!price || !material) continue;
+
+            if (!map.has(material.name)) {
+                map.set(material.name, { name: material.name, unit: material.unit, items: [] });
+            }
+
+            map.get(material.name)!.items.push({
+                id: price.id,
+                variant: price.variant,
+                price: price.price,
+                stock: price.stock,
+                photo_url: price.photo_url,
+                photo_conversion_url: price.photo_conversion_url,
+            });
+        }
+
+        return map;
+    }, [quantities, priceMap, materialByPriceId]);
+
+    const isMultiMaterial = purchasedVariantsByMaterial.size > 1;
 
     const updateQuantity = useCallback((priceId: number, value: number) => {
         setQuantities((prev) => ({
@@ -241,182 +262,77 @@ export default function PurchaseEdit({
                                         </CardTitle>
                                     </CardHeader>
                                     <CardContent className="space-y-4">
-                                        <div className="grid gap-2">
-                                            <Label>
-                                                Nama Bahan Baku{' '}
-                                                <span className="text-destructive">
-                                                    *
-                                                </span>
-                                            </Label>
-                                            <Combobox
-                                                items={rawMaterials}
-                                                itemToStringLabel={(
-                                                    m,
-                                                ) => m.name}
-                                                value={selectedMaterial}
-                                                onValueChange={(
-                                                    value,
-                                                ) =>
-                                                    setSelectedMaterialName(
-                                                        value?.name ??
-                                                            '',
-                                                    )
-                                                }
-                                            >
-                                                <ComboboxInput
-                                                    placeholder="Cari bahan baku..."
-                                                    className="w-full"
-                                                    disabled
-                                                />
-                                                <ComboboxContent>
-                                                    <ComboboxEmpty>
-                                                        Tidak ada bahan
-                                                        baku ditemukan.
-                                                    </ComboboxEmpty>
-                                                    <ComboboxList>
-                                                        {(m) => (
-                                                            <ComboboxItem
-                                                                key={
-                                                                    m.id
-                                                                }
-                                                                value={
-                                                                    m
-                                                                }
-                                                            >
-                                                                {m.name}{' '}
-                                                                (
-                                                                {m.unit}
-                                                                )
-                                                            </ComboboxItem>
-                                                        )}
-                                                    </ComboboxList>
-                                                </ComboboxContent>
-                                            </Combobox>
-                                            <InputError
-                                                message={
-                                                    errors.existing_items
-                                                }
-                                            />
-                                        </div>
-
-                                        {selectedMaterial && (
-                                            <div className="space-y-2">
-                                                {selectedMaterial.raw_material_prices.map(
-                                                    (price) => (
-                                                        <div
-                                                            key={
-                                                                price.id
-                                                            }
-                                                            className={
-                                                                (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'
-                                                            }
-                                                        >
-                                                            <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:{' '}
-                                                                        {formatQuantity(
-                                                                            Number(
-                                                                                price.stock,
-                                                                            ),
-                                                                        )}{' '}
-                                                                        {
-                                                                            selectedMaterial.unit
-                                                                        }{' '}
-                                                                        ·{' '}
-                                                                        {formatCurrency(
-                                                                            price.price,
-                                                                        )}
-                                                                    </p>
-                                                                </div>
-                                                            </div>
-                                                            <div className="flex items-center gap-2">
-                                                                <Button
-                                                                    type="button"
-                                                                    variant="outline"
-                                                                    size="icon"
-                                                                    disabled={
-                                                                        !(
-                                                                            quantities[
-                                                                            price
-                                                                                .id
-                                                                            ] ??
-                                                                            0
-                                                                        )
-                                                                    }
-                                                                    onClick={() =>
-                                                                        incrementQuantity(
-                                                                            price.id,
-                                                                            -1,
-                                                                        )
-                                                                    }
-                                                                >
-                                                                    <Minus className="h-4 w-4" />
-                                                                </Button>
-                                                                <NumberInput
-                                                                    className="w-24 text-center"
-                                                                    value={
-                                                                        quantities[
-                                                                        price
-                                                                            .id
-                                                                        ] ??
-                                                                        0
-                                                                    }
-                                                                    onValueChange={(
-                                                                        val,
-                                                                    ) =>
-                                                                        updateQuantity(
-                                                                            price.id,
-                                                                            val,
-                                                                        )
-                                                                    }
+                                        {Array.from(purchasedVariantsByMaterial.entries()).map(([materialName, group]) => (
+                                            <div key={materialName} className="space-y-2">
+                                                {isMultiMaterial && (
+                                                    <p className="text-sm font-medium text-muted-foreground">
+                                                        {group.name} ({group.unit})
+                                                    </p>
+                                                )}
+                                                {group.items.map((price) => (
+                                                    <div
+                                                        key={price.id}
+                                                        className="flex flex-wrap items-center justify-between gap-2 rounded-lg border border-primary p-3"
+                                                    >
+                                                        <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"
                                                                 />
-                                                                <Button
-                                                                    type="button"
-                                                                    variant="outline"
-                                                                    size="icon"
-                                                                    onClick={() =>
-                                                                        incrementQuantity(
-                                                                            price.id,
-                                                                            1,
-                                                                        )
-                                                                    }
-                                                                >
-                                                                    <Plus className="h-4 w-4" />
-                                                                </Button>
+                                                            ) : (
+                                                                <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:{' '}
+                                                                    {formatQuantity(Number(price.stock))}{' '}
+                                                                    {group.unit} · {formatCurrency(price.price)}
+                                                                </p>
                                                             </div>
                                                         </div>
-                                                    ),
-                                                )}
+                                                        <div className="flex items-center gap-2">
+                                                            <Button
+                                                                type="button"
+                                                                variant="outline"
+                                                                size="icon"
+                                                                disabled={
+                                                                    (quantities[price.id] ?? 0) <= 0
+                                                                }
+                                                                onClick={() =>
+                                                                    incrementQuantity(price.id, -1)
+                                                                }
+                                                            >
+                                                                <Minus className="h-4 w-4" />
+                                                            </Button>
+                                                            <NumberInput
+                                                                className="w-24 text-center"
+                                                                value={quantities[price.id] ?? 0}
+                                                                onValueChange={(val) =>
+                                                                    updateQuantity(price.id, val)
+                                                                }
+                                                            />
+                                                            <Button
+                                                                type="button"
+                                                                variant="outline"
+                                                                size="icon"
+                                                                onClick={() =>
+                                                                    incrementQuantity(price.id, 1)
+                                                                }
+                                                            >
+                                                                <Plus className="h-4 w-4" />
+                                                            </Button>
+                                                        </div>
+                                                    </div>
+                                                ))}
                                             </div>
-                                        )}
+                                        ))}
                                     </CardContent>
                                 </Card>
                             </div>