setSearch(e.target.value)} value={search} />

{loading ? (

) : (

{products.map((item) => (

addItem(item)} >

{item.name}

Rp. {formatIDR(item.price)}

))}

)}

setData('note', e.target.value)
                                }
                                rows={4}
                                placeholder="Catatan"
                            />
                        </div>
                    </div>
                    <div className="w-full md:w-5/12 flex flex-col">
                        <CustomerSelectionInput
                            placeholder="Pelanggan"
                            itemSelected={data.customer_id}
                            onItemSelected={(id) => setData('customer_id', id)}
                            error={errors.customer_id}
                        />
                        <FormInputDate
                            selected={data.date}
                            onChange={(date) => setData('date', date)}
                            placeholder="Tanggal"
                            error={errors.date}
                        />
                        <div className="my-4 h-[350px] overflow-y-scroll">
                            <div className="flex flex-row justify-between space-x-2 space-y-2 rounded-md shadow items-center p-2">
                                <div className="w-2/3">Nama</div>
                                <div className="w-1/3">Jumlah</div>
                                <div className="">Subtotal</div>
                                <div className="text-transparent">
                                    <div className="h-5 w-5"></div>
                                </div>
                            </div>
                            {data.items.map((item) => (
                                <div
                                    className="flex flex-row justify-between space-x-2 space-y-2 rounded-md shadow items-center p-2"
                                    key={item.id}
                                >
                                    <div className="w-2/3">{item.name}</div>
                                    <div className="w-1/3 text-right">
                                        <FormInput
                                            type="number"
                                            min="1"
                                            value={item.qty}
                                            onChange={(e) =>
                                                setQuantityItem(
                                                    item.id,
                                                    e.target.value
                                                )
                                            }
                                            className="text-right"
                                        />
                                    </div>
                                    <div className="text-right w-1/3">
                                        {formatIDR(item.qty * item.price)}
                                    </div>
                                    <div
                                        className="text-red-500"
                                        onClick={() => removeItem(item.id)}
                                    >
                                        <HiXCircle className="h-5 w-5" />
                                    </div>
                                </div>
                            ))}
                        </div>
                        <div className="w-full flex flex-row justify-between font-bold text-2xl">
                            <div>Total:</div>
                            <div>{formatIDR(total)}</div>
                        </div>
                        <Button
                            disable={processing}
                            onClick={(e) => handleSubmit()}
                        >
                            Simpan
                        </Button>
                    </div>
                </div>
                <div className="flex flex-row p-6 shadow-sm sm:rounded-lg bg-white w-full space-x-2 mt-2 invisible">
                    <div className="w-full">
                        <TextArea
                            value={data.note}
                            onChange={(e) => setData('note', e.target.value)}
                            rows={4}
                            label="Catatan"
                        />
                    </div>
                </div>
            </div>
        </AuthenticatedLayout>
    )
}