From 122d26df3abf04a97c1eba4a60b13caea8c5fd51 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Anna-Sara=20S=C3=A9lea?= Date: Sun, 20 Apr 2025 22:03:51 +0200 Subject: [PATCH] Frontend: Customer --- resources/js/Pages/Customer.tsx | 138 ++++++++++++++++++++++++++++++++ 1 file changed, 138 insertions(+) create mode 100644 resources/js/Pages/Customer.tsx diff --git a/resources/js/Pages/Customer.tsx b/resources/js/Pages/Customer.tsx new file mode 100644 index 0000000..e234325 --- /dev/null +++ b/resources/js/Pages/Customer.tsx @@ -0,0 +1,138 @@ +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 + purchases: [{ + 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

+ { customer.deposit && +

Swishad summa: {customer.deposit} kr

+ } +

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

+
+ +
+

Registrera köp

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

Lägga in swishpeng

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

{purchase.amount} kr

+
+ })} +
+ + + +
+
+
+ + +
+
+ + + ); +}