Buat Entri Jurnal

Catat transaksi manual ke dalam buku besar.

{!isBalanced && totals.debit > 0 && ( Jurnal Tidak Seimbang Total Debit ({formatIDR(totals.debit)}) tidak sama dengan Total Kredit ({formatIDR(totals.credit)}). Selisih: {formatIDR(totals.difference)} )}

Informasi Jurnal Detail header untuk entri jurnal ini.

Tanggal Transaksi{' '} * setData( 'transaction_date', e.target.value, ) } className={ errors.transaction_date ? 'border-red-500' : '' } /> {errors.transaction_date && (

{errors.transaction_date}

)}

Keterangan Utama{' '} *

setData('description', e.target.value)
                                    }
                                    className={
                                        errors.description
                                            ? 'border-red-500'
                                            : ''
                                    }
                                />
                                {errors.description && (
                                    <p className="text-xs text-red-500">
                                        {errors.description}
                                    </p>
                                )}
                            </div>
                        </CardContent>
                    </Card>

<Card>
                        <CardHeader className="flex flex-row items-center justify-between space-y-0">
                            <div>
                                <CardTitle>Rincian Baris Jurnal</CardTitle>
                                <CardDescription>
                                    Tambahkan baris debit dan kredit.
                                </CardDescription>
                            </div>
                            <Button
                                type="button"
                                variant="outline"
                                size="sm"
                                onClick={addLine}
                            >
                                <Plus className="mr-2 h-4 w-4" />
                                Tambah Baris
                            </Button>
                        </CardHeader>
                        <CardContent className="space-y-4">
                            <div className="hidden grid-cols-12 gap-4 border-b px-2 pb-2 text-sm font-bold md:grid">
                                <div className="col-span-4">Akun</div>
                                <div className="col-span-2 text-right">
                                    Debit
                                </div>
                                <div className="col-span-2 text-right">
                                    Kredit
                                </div>
                                <div className="col-span-3">Keterangan</div>
                                <div className="col-span-1"></div>
                            </div>

{data.lines.map((line, index) => (
                                <div
                                    key={index}
                                    className="relative grid grid-cols-1 gap-4 rounded-lg border p-2 md:grid-cols-12 md:border-none"
                                >
                                    <div className="col-span-1 space-y-1 md:col-span-4">
                                        <Label className="md:hidden">
                                            Akun
                                        </Label>
                                        <SearchableSelect
                                            options={accountOptions}
                                            value={line.account_id.toString()}
                                            onValueChange={(v) =>
                                                updateLine(
                                                    index,
                                                    'account_id',
                                                    v,
                                                )
                                            }
                                            placeholder="Pilih Akun"
                                            className={
                                                errors[
                                                    `lines.${index}.account_id` as keyof typeof errors
                                                ]
                                                    ? 'border-red-500'
                                                    : ''
                                            }
                                        />
                                        {errors[
                                            `lines.${index}.account_id` as keyof typeof errors
                                        ] && (
                                            <p className="text-xs text-red-500">
                                                {
                                                    errors[
                                                        `lines.${index}.account_id` as keyof typeof errors
                                                    ]
                                                }
                                            </p>
                                        )}
                                    </div>
                                    <div className="col-span-1 space-y-1 md:col-span-2">
                                        <Label className="md:hidden">
                                            Debit
                                        </Label>
                                        <Input
                                            type="number"
                                            className="text-right"
                                            value={line.debit}
                                            onChange={(e) =>
                                                updateLine(
                                                    index,
                                                    'debit',
                                                    e.target.value,
                                                )
                                            }
                                            min="0"
                                        />
                                    </div>
                                    <div className="col-span-1 space-y-1 md:col-span-2">
                                        <Label className="md:hidden">
                                            Kredit
                                        </Label>
                                        <Input
                                            type="number"
                                            className="text-right"
                                            value={line.credit}
                                            onChange={(e) =>
                                                updateLine(
                                                    index,
                                                    'credit',
                                                    e.target.value,
                                                )
                                            }
                                            min="0"
                                        />
                                    </div>
                                    <div className="col-span-1 space-y-1 md:col-span-3">
                                        <Label className="md:hidden">
                                            Keterangan Baris
                                        </Label>
                                        <Input
                                            placeholder="Opsional"
                                            value={line.description}
                                            onChange={(e) =>
                                                updateLine(
                                                    index,
                                                    'description',
                                                    e.target.value,
                                                )
                                            }
                                        />
                                    </div>
                                    <div className="col-span-1 flex items-end justify-end md:col-span-1">
                                        <Button
                                            type="button"
                                            variant="ghost"
                                            size="icon"
                                            className="h-10 w-10 text-destructive"
                                            onClick={() => removeLine(index)}
                                            disabled={data.lines.length <= 2}
                                        >
                                            <Trash2 className="h-4 w-4" />
                                        </Button>
                                    </div>
                                    {errors[
                                        `lines.${index}` as keyof typeof errors
                                    ] && (
                                        <div className="col-span-full mt-1 text-xs text-red-500">
                                            {
                                                errors[
                                                    `lines.${index}` as keyof typeof errors
                                                ]
                                            }
                                        </div>
                                    )}
                                </div>
                            ))}

<div className="grid grid-cols-1 gap-4 border-t pt-4 font-bold md:grid-cols-12">
                                <div className="col-span-4 hidden self-center pr-4 text-right md:block">
                                    TOTAL
                                </div>
                                <div className="col-span-1 rounded bg-muted p-2 text-right md:col-span-2">
                                    <Label className="mb-1 block text-xs md:hidden">
                                        Total Debit
                                    </Label>
                                    {formatIDR(totals.debit)}
                                </div>
                                <div className="col-span-1 rounded bg-muted p-2 text-right md:col-span-2">
                                    <Label className="mb-1 block text-xs md:hidden">
                                        Total Kredit
                                    </Label>
                                    {formatIDR(totals.credit)}
                                </div>
                                <div className="col-span-1 flex flex-col items-end gap-1 md:col-span-3 md:col-start-9">
                                    <div
                                        className={cn(
                                            'rounded px-2 py-1 text-sm font-medium',
                                            isBalanced
                                                ? 'bg-green-100 text-green-700'
                                                : 'bg-red-100 text-red-700',
                                        )}
                                    >
                                        {isBalanced
                                            ? 'Balanced'
                                            : `Diff: ${formatIDR(totals.difference)}`}
                                    </div>
                                </div>
                            </div>
                        </CardContent>
                    </Card>

<div className="flex justify-end gap-2 pb-10">
                        <Button
                            type="button"
                            variant="outline"
                            asChild
                            disabled={processing}
                        >
                            <Link href={accountingRoutes.journal().url}>
                                Batal
                            </Link>
                        </Button>
                        <Button
                            type="submit"
                            disabled={processing || !isBalanced}
                        >
                            <Save className="mr-2 h-4 w-4" />
                            Simpan Jurnal
                        </Button>
                    </div>
                </form>
            </div>
        </AppLayout>
    );
}

// Helper for conditional class names
function cn(...classes: (string | boolean | undefined)[]) {
    return classes.filter(Boolean).join(' ');
}