jonathan/lan_kiosk
1
0
Fork 0
mirror of https://github.com/anna-sara/lan_kiosk synced 2025-10-26 21:17:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added purchases to customer

Browse source
This commit is contained in:
Anna-Sara Sélea 2025-05-05 19:15:30 +02:00
parent 43a6f002fd
commit f3c99e941d
2 changed files with 69 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
resources/js/Pages/Customer.tsx
View file

@ -15,6 +15,10 @@ interface CustomerProps {
id: number
amount: number
}]
deposits: [{
id: number
amount: number
}]
}
};
@ -52,9 +56,7 @@ export default function Customer({customer}: CustomerProps) {
<div className='container is-centered'>
<div className="box">
<h2 className='title is-4'>Saldo: {customer.amount_left ? customer.amount_left : 0} kr</h2>
{ customer.deposit &&
<p>Inbetalad summa: {customer.deposit} kr</p>
}
<p>Inbetalad summa: {customer.deposit ? customer.deposit : 0} kr</p>
<p>Vårnadshavare: {customer.guardian_name}</p>
<p>Ge ev överblivet saldo till vBytes: {customer.give_leftover ? "Ja" : "Nej"}</p>
</div>
@ -94,7 +96,7 @@ export default function Customer({customer}: CustomerProps) {
required
className="input"
type="number"
name="amount"
name="deposit"
value={data.deposit}
placeholder="Summa"
onChange={(e) => setData('deposit', e.target.value)}
@ -111,7 +113,7 @@ export default function Customer({customer}: CustomerProps) {
<details className="box">
<summary className='title is-4 my-3'>
<span>Tidigare köp</span>
<span>Köp</span>
<div className="summary-chevron-up">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" className="feather feather-chevron-down">
<polyline points="6 9 12 15 18 9"></polyline>
@ -129,6 +131,26 @@ export default function Customer({customer}: CustomerProps) {
</svg>
</div>
</details>
<details className="box">
<summary className='title is-4 my-3'>
<span>Inbetalningar</span>
<div className="summary-chevron-up">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" className="feather feather-chevron-down">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</div>
</summary>
{customer.deposits && customer.deposits.map( deposit => {
return <div key={deposit.id} className="box">
<p>{deposit.amount} kr</p>
</div>
})}
<div className="summary-chevron-down">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" className="feather feather-chevron-up">
<polyline points="18 15 12 9 6 15"></polyline>
</svg>
</div>
</details>
</div>

62
resources/js/Pages/Dashboard.tsx
View file

@ -1,6 +1,6 @@
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { Head } from '@inertiajs/react';
import { useState } from 'react';
import { SetStateAction, useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faArrowRight } from '@fortawesome/free-solid-svg-icons'
@ -21,7 +21,9 @@ interface Customer {
export default function Dashboard({customers}: CustomerProps) {
const [searchItem, setSearchItem] = useState('')
const [activeTab, setActiveTab] = useState('')
const [filteredCustomers, setFilteredCustomers] = useState<Customer[]>(customers)
const letterArray = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","Å","Ä","Ö"];
const handleInputChange = (e: any) => {
const searchTerm = e.target.value;
@ -34,6 +36,14 @@ export default function Dashboard({customers}: CustomerProps) {
setFilteredCustomers(filteredItems);
}
const handleInputClick = (searchTerm: any) => {
const filteredItems = customers.filter((customer) =>
customer.name.toLowerCase().startsWith(searchTerm.toLowerCase())
);
setFilteredCustomers(filteredItems);
}
return (
<AuthenticatedLayout>
<Head title="Dashboard" />
@ -41,25 +51,37 @@ export default function Dashboard({customers}: CustomerProps) {
<section className='section'>
<div className="container is-max-desktop">
<h1 className="title is-2">Deltagare</h1>
<input
className='input my-4'
type="text"
value={searchItem}
onChange={handleInputChange}
placeholder='Skriv för att söka'
/>
<div className='container is-centered'>
{filteredCustomers && filteredCustomers.map( customer => {
return <a key={customer.id} className="box is-flex is-justify-content-space-between" href={`/customer/` + customer.id}>
<p>{customer.name}</p>
<span className="icon has-text-black">
<FontAwesomeIcon icon={faArrowRight} />
</span>
</a>
})}
</div>
<input
className='input my-4'
type="text"
value={searchItem}
onChange={handleInputChange}
placeholder='Skriv för att söka'
/>
<div>
<ul className='grid is-col-min-2 is-column-gap-1 mb-5'>
{ letterArray && letterArray.map( letter => {
return <li className={`${activeTab == letter ? "is-active" : ""} cell button letter is-small is-white`} onClick={ () => [setActiveTab(letter) ,handleInputClick(letter)]}>
{letter}
</li>
})
}
<li className='cell button is-small is-white' onClick={ () => [setActiveTab(""), setFilteredCustomers(customers), setSearchItem("") ]}>
Rensa
</li>
</ul>
</div>
<div className='container is-centered'>
{filteredCustomers && filteredCustomers.map( customer => {
return <a key={customer.id} className="box is-flex is-justify-content-space-between" href={`/customer/` + customer.id}>
<p>{customer.name}</p>
<span className="icon has-text-black">
<FontAwesomeIcon icon={faArrowRight} />
</span>
</a>
})}
</div>
</div>
</section>