import TextInput from '@/Components/TextInput'; import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'; import { Head, useForm } from '@inertiajs/react'; import { FormEventHandler } from 'react'; interface CustomerProps { customer:{ id: number name: string deposit: number amount_left: number give_leftover: number guardian_name: string purchases: [{ id: number amount: number }] deposits: [{ id: number amount: number }] } }; export default function Customer({customer}: CustomerProps) { const { data, setData, post, processing, errors, reset } = useForm({ amount: "", customer_id: customer.id, deposit: "", id: customer.id }); const submit: FormEventHandler = (e) => { e.preventDefault() post(route('register_purchase'), { onFinish: () => reset('amount'), }); } const submitDeposit: FormEventHandler = (e) => { e.preventDefault() post('/api/register_deposit/' + customer.id, { onFinish: () => reset('deposit'), }); } return (

{customer.name}

Saldo: {customer.amount_left ? customer.amount_left : 0} kr

Inbetalad summa: {customer.deposit ? customer.deposit : 0} kr

Vårnadshavare: {customer.guardian_name}

Ge ev överblivet saldo till vBytes: {customer.give_leftover ? "Ja" : "Nej"}

Registrera köp

setData('amount', e.target.value)} />

Inbetalning Swish/kontant

setData('deposit', e.target.value)} />
Köp
{customer.purchases && customer.purchases.map( purchase => { return

{purchase.amount} kr

})}
Inbetalningar
{customer.deposits && customer.deposits.map( deposit => { return

{deposit.amount} kr

})}
); }