From add157183b41b80b40e5b592556e098727874ed7 Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Fri, 7 Aug 2026 09:11:47 +0700
Subject: [PATCH] feat: replace useMemo with useState for selectedProductId and
 update product selection UI

---
 .../pages/admin/manage/transaction/edit.tsx   | 61 ++++++++++++++++---
 1 file changed, 51 insertions(+), 10 deletions(-)

diff --git a/resources/js/pages/admin/manage/transaction/edit.tsx b/resources/js/pages/admin/manage/transaction/edit.tsx
index 17cf85d..2a499ea 100644
--- a/resources/js/pages/admin/manage/transaction/edit.tsx
+++ b/resources/js/pages/admin/manage/transaction/edit.tsx
@@ -83,16 +83,15 @@ export default function TransactionEdit({ transaction, data }: Props) {
     const [photo, setPhoto] = useState<string | null>(transaction.photo_key);
     const [photoUrl, setPhotoUrl] = useState<string | null>(transaction.photo_url);
     const [uploading, setUploading] = useState(false);
-    const selectedProductId = useMemo(() => {
+    const [selectedProductId, setSelectedProductId] = useState(() => {
         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) : '';
-    }, [products, transaction.items]);
+    });
     const [quantities, setQuantities] = useState<Record<number, number>>(() =>
         Object.fromEntries(
             (transaction.items ?? []).map((item) => [
@@ -302,10 +301,57 @@ export default function TransactionEdit({ transaction, data }: Props) {
                             <div className="space-y-6 md:col-span-2">
                                 <Card>
                                     <CardHeader>
-                                        <CardTitle>Item Transaksi</CardTitle>
+                                        <CardTitle>Pilih Produk</CardTitle>
                                     </CardHeader>
                                     <CardContent className="space-y-4">
-                                        {selectedProduct ? (
+                                        <div className="grid gap-2">
+                                            <Label>
+                                                Nama Produk{' '}
+                                                <span className="text-destructive">
+                                                    *
+                                                </span>
+                                            </Label>
+                                            <Combobox
+                                                items={products}
+                                                itemToStringLabel={(p) =>
+                                                    p.name
+                                                }
+                                                value={selectedProduct}
+                                                onValueChange={(value) =>
+                                                    setSelectedProductId(
+                                                        value
+                                                            ? String(value.id)
+                                                            : '',
+                                                    )
+                                                }
+                                            >
+                                                <ComboboxInput
+                                                    placeholder="Cari produk..."
+                                                    className="w-full"
+                                                />
+                                                <ComboboxContent>
+                                                    <ComboboxEmpty>
+                                                        Tidak ada produk
+                                                        ditemukan.
+                                                    </ComboboxEmpty>
+                                                    <ComboboxList>
+                                                        {(p) => (
+                                                            <ComboboxItem
+                                                                key={p.id}
+                                                                value={p}
+                                                            >
+                                                                {p.name}
+                                                            </ComboboxItem>
+                                                        )}
+                                                    </ComboboxList>
+                                                </ComboboxContent>
+                                            </Combobox>
+                                            <InputError
+                                                message={errors.items}
+                                            />
+                                        </div>
+
+                                        {selectedProduct && (
                                             <div className="space-y-2">
                                                 {selectedProduct.product_variants.map(
                                                     (variant) => {
@@ -425,12 +471,7 @@ export default function TransactionEdit({ transaction, data }: Props) {
                                                     },
                                                 )}
                                             </div>
-                                        ) : (
-                                            <p className="text-sm text-muted-foreground">
-                                                Tidak ada item.
-                                            </p>
                                         )}
-                                        <InputError message={errors.items} />
                                     </CardContent>
                                 </Card>
                             </div>