Tambah Invoice

({ ...data, ...getPayload(), })} onError={() => { toast.error( 'Ada data yang belum sesuai, silakan periksa kembali input Anda.', ); }} > {({ errors, processing }) => (

Informasi Invoice

Nomor Invoice{' '} * setInvoiceNumber( e.target.value, ) } placeholder="Masukkan nomor invoice" />

Nama Pelanggan{' '} * setCustomerName( e.target.value, ) } placeholder="Masukkan nama pelanggan" />

No. Telepon Pelanggan

Alamat Pelanggan

<InputError
                                                message={
                                                    errors.customer_address
                                                }
                                            />
                                        </div>
                                        <div className="grid grid-cols-2 gap-4 md:col-span-3">
                                            <div className="grid gap-2">
                                                <Label htmlFor="date">
                                                    Tanggal{' '}
                                                    <span className="text-destructive">
                                                        *
                                                    </span>
                                                </Label>
                                                <DatePicker
                                                    value={date}
                                                    onChange={setDate}
                                                    placeholder="Pilih tanggal"
                                                />
                                                <InputError
                                                    message={errors.date}
                                                />
                                            </div>
                                            <div className="grid gap-2">
                                                <Label htmlFor="due_date">
                                                    Jatuh Tempo
                                                </Label>
                                                <DatePicker
                                                    value={dueDate}
                                                    onChange={setDueDate}
                                                    placeholder="Pilih jatuh tempo"
                                                />
                                                <InputError
                                                    message={errors.due_date}
                                                />
                                            </div>
                                        </div>
                                    </CardContent>
                                </Card>

<Card>
                                    <CardHeader>
                                        <CardTitle>Item Invoice</CardTitle>
                                    </CardHeader>
                                    <CardContent className="space-y-4">
                                        {items.map((item, index) => (
                                            <div
                                                key={index}
                                                className="space-y-4 rounded-lg border p-4"
                                            >
                                                <div className="flex items-center justify-between">
                                                    <h4 className="font-medium">
                                                        Item {index + 1}
                                                    </h4>
                                                    {items.length > 1 && (
                                                        <Button
                                                            type="button"
                                                            variant="outline"
                                                            size="icon"
                                                            onClick={() =>
                                                                confirmRemoveItem(
                                                                    index,
                                                                )
                                                            }
                                                        >
                                                            <Trash2 className="h-4 w-4 text-destructive" />
                                                        </Button>
                                                    )}
                                                </div>
                                                <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
                                                    <div className="grid gap-2 md:col-span-1">
                                                        <Label>
                                                            Nama Item{' '}
                                                            <span className="text-destructive">
                                                                *
                                                            </span>
                                                        </Label>
                                                        <Input
                                                            value={item.name}
                                                            onChange={(e) =>
                                                                updateItem(
                                                                    index,
                                                                    'name',
                                                                    e.target
                                                                        .value,
                                                                )
                                                            }
                                                            placeholder="Contoh: Jasa Cutting"
                                                        />
                                                        <InputError
                                                            message={
                                                                errors[
                                                                    `items.${index}.name`
                                                                ]
                                                            }
                                                        />
                                                    </div>
                                                    <div className="grid gap-2">
                                                        <Label>
                                                            Jumlah{' '}
                                                            <span className="text-destructive">
                                                                *
                                                            </span>
                                                        </Label>
                                                        <Input
                                                            type="text"
                                                            inputMode="numeric"
                                                            value={
                                                                item.quantity
                                                            }
                                                            onChange={(e) =>
                                                                updateItem(
                                                                    index,
                                                                    'quantity',
                                                                    e.target
                                                                        .value,
                                                                )
                                                            }
                                                        />
                                                        <InputError
                                                            message={
                                                                errors[
                                                                    `items.${index}.quantity`
                                                                ]
                                                            }
                                                        />
                                                    </div>
                                                    <div className="grid gap-2">
                                                        <Label>
                                                            Harga Satuan{' '}
                                                            <span className="text-destructive">
                                                                *
                                                            </span>
                                                        </Label>
                                                        <RupiahInput
                                                            value={item.price}
                                                            onValueChange={(
                                                                val,
                                                            ) =>
                                                                updateItem(
                                                                    index,
                                                                    'price',
                                                                    val,
                                                                )
                                                            }
                                                        />
                                                        <InputError
                                                            message={
                                                                errors[
                                                                    `items.${index}.price`
                                                                ]
                                                            }
                                                        />
                                                    </div>
                                                </div>
                                                <div className="text-right text-sm text-muted-foreground">
                                                    Subtotal:{' '}
                                                    <span className="font-medium text-foreground">
                                                        {formatCurrency(
                                                            (parseInt(
                                                                item.quantity,
                                                                10,
                                                            ) || 0) *
                                                                item.price,
                                                        )}
                                                    </span>
                                                </div>
                                            </div>
                                        ))}

<Button
                                            type="button"
                                            variant="outline"
                                            onClick={addItem}
                                        >
                                            <Plus className="h-4 w-4" />
                                            Tambah Item
                                        </Button>
                                        <InputError message={errors.items} />
                                    </CardContent>
                                </Card>
                            </div>

<div className="space-y-6 md:col-span-1">
                                <Card className="sticky top-6">
                                    <CardHeader>
                                        <CardTitle>Ringkasan</CardTitle>
                                    </CardHeader>
                                    <CardContent className="space-y-4">
                                        <div className="grid gap-2">
                                            <Label>
                                                Status{' '}
                                                <span className="text-destructive">
                                                    *
                                                </span>
                                            </Label>
                                            <Select
                                                value={status}
                                                onValueChange={setStatus}
                                            >
                                                <SelectTrigger className="w-full">
                                                    <SelectValue placeholder="Pilih status" />
                                                </SelectTrigger>
                                                <SelectContent>
                                                    {statusOptions.map(
                                                        (opt) => (
                                                            <SelectItem
                                                                key={
                                                                    opt.value
                                                                }
                                                                value={
                                                                    opt.value
                                                                }
                                                            >
                                                                {opt.label}
                                                            </SelectItem>
                                                        ),
                                                    )}
                                                </SelectContent>
                                            </Select>
                                            <InputError
                                                message={errors.status}
                                            />
                                        </div>

<div className="grid gap-2">
                                            <Label htmlFor="description">
                                                Keterangan
                                            </Label>
                                            <Textarea
                                                id="description"
                                                value={description}
                                                onChange={(e) =>
                                                    setDescription(
                                                        e.target.value,
                                                    )
                                                }
                                                placeholder="Masukkan keterangan"
                                            />
                                            <InputError
                                                message={errors.description}
                                            />
                                        </div>

<div className="border-t pt-2">
                                            <div className="flex items-center justify-between text-sm font-semibold">
                                                <span>Total</span>
                                                <span>
                                                    {formatCurrency(total)}
                                                </span>
                                            </div>
                                        </div>

<Button
                                            type="submit"
                                            className="w-full"
                                            disabled={
                                                processing ||
                                                !invoiceNumber ||
                                                !customerName ||
                                                !date ||
                                                items.length === 0 ||
                                                items.some((i) => !i.name)
                                            }
                                        >
                                            {processing
                                                ? 'Menyimpan...'
                                                : 'Simpan'}
                                        </Button>
                                    </CardContent>
                                </Card>
                            </div>
                        </div>
                    )}
                </Form>

<ConfirmDialog
                    open={deleteConfirmOpen}
                    onOpenChange={(open) => {
                        if (!open) {
                            setDeleteConfirmOpen(false);
                            setDeleteItemIndex(null);
                        }
                    }}
                    title="Hapus Item"
                    description="Apakah Anda yakin ingin menghapus item ini?"
                    confirmLabel="Hapus"
                    variant="destructive"
                    onConfirm={() => {
                        if (deleteItemIndex !== null) {
                            removeItem(deleteItemIndex);
                        }

setDeleteConfirmOpen(false);
                        setDeleteItemIndex(null);
                    }}
                />
            </div>
        </>
    );
}