import { Head, useForm } from '@inertiajs/react'; import { AlertCircle, ArrowRight, Calculator, CheckCircle2, Info, } from 'lucide-react'; import { useMemo } from 'react'; import { Alert, AlertDescription } from '@/components/ui/alert'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Textarea } from '@/components/ui/textarea'; import AppLayout from '@/layouts/app-layout'; import { formatIDR } from '@/lib/formatters'; import type { BreadcrumbItem } from '@/types'; interface Props { date: string; systemBalance: number; denominations: number[]; alreadySubmitted: boolean; existingRecord: { id: number } | null; } const breadcrumbs: BreadcrumbItem[] = [ { title: 'Kas & Teller', href: '/cash-counts' }, { title: 'Hitung Kas Harian', href: '/cash-counts/create' }, ]; const DENOMINATION_LABELS: Record = { 1000: 'Rp 1.000', 2000: 'Rp 2.000', 5000: 'Rp 5.000', 10000: 'Rp 10.000', 20000: 'Rp 20.000', 50000: 'Rp 50.000', 100000: 'Rp 100.000', }; export default function Create({ date, systemBalance, denominations, alreadySubmitted, existingRecord, }: Props) { const { data, setData, post, processing, errors } = useForm({ date, system_balance: systemBalance, details: [...denominations] .sort((a, b) => b - a) .map((d) => ({ denomination: d, quantity: 0, })), note: '', }); console.log(data.system_balance); // Auto-calculate totals const physicalTotal = useMemo( () => data.details.reduce( (sum, item) => sum + item.denomination * (item.quantity || 0), 0, ), [data.details], ); const difference = physicalTotal - systemBalance; const status: 'balanced' | 'over' | 'short' = difference === 0 ? 'balanced' : difference > 0 ? 'over' : 'short'; const isNoteRequired = difference !== 0; const isQuantityEmpty = data.details.every( (d) => !d.quantity || d.quantity === 0, ); const isSubmitDisabled = processing || isQuantityEmpty || (isNoteRequired && data.note.trim() === ''); const handleQuantityChange = (index: number, value: string) => { const qty = parseInt(value, 10); const updated = data.details.map((item, i) => i === index ? { ...item, quantity: isNaN(qty) ? 0 : qty } : item, ); setData('details', updated); }; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); post('/cash-counts', { preserveScroll: true }); }; const statusConfig = { balanced: { label: 'Seimbang', color: 'bg-emerald-100 text-emerald-800 border-emerald-200', icon: , }, over: { label: 'Lebih', color: 'bg-amber-100 text-amber-800 border-amber-200', icon: , }, short: { label: 'Kurang', color: 'bg-red-100 text-red-800 border-red-200', icon: , }, }; const currentStatus = statusConfig[status]; if (alreadySubmitted && existingRecord) { return (

Sudah Disubmit

Hitung kas untuk tanggal {date}{' '} sudah pernah disubmit dan tidak dapat diubah.

); } return (
{/* Page Header */}

Hitung Kas Fisik Harian

Catat jumlah lembar uang fisik untuk tanggal{' '} {date}
Perhitungan otomatis
{/* Denomination Input Table */}
Input Lembar Uang
{data.details.map( (item, index) => { const subtotal = item.denomination * (item.quantity || 0); return ( ); }, )}
Pecahan Jumlah Lembar Subtotal
{ DENOMINATION_LABELS[ item .denomination ] }
handleQuantityChange( index, e .target .value, ) } />
{subtotal > 0 ? ( {formatIDR( subtotal, )} ) : ( — )}
Total Kas Fisik {formatIDR( physicalTotal, )}
{errors.details && (

{errors.details}

)}
{/* Summary Panel */}
{/* Summary Card */} Ringkasan {/* System Balance */}
Saldo Kas Sistem
{formatIDR(systemBalance)}
{/* Physical Total */}
Total Kas Fisik
{formatIDR(physicalTotal)}
{/* Difference */}
Selisih
0 ? 'text-amber-600' : 'text-red-600' }`} > {difference >= 0 ? '+' : ''} {formatIDR(difference)}
{/* Status Badge */}
Status
{currentStatus.icon} {currentStatus.label}
{/* Note Field - only shown if discrepancy */} {isNoteRequired && ( Ada selisih kas. Keterangan wajib diisi.