mirror of
https://github.com/anna-sara/lan_kiosk
synced 2025-10-26 21:17:13 +01:00
Added purchases to customer
This commit is contained in:
Anna-Sara Sélea
parent
43a6f002fd
commit
f3c99e941d
2 changed files with 69 additions and 25 deletions
|
|
@ -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>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
|
|
@ -48,6 +58,20 @@ export default function Dashboard({customers}: CustomerProps) {
|
|||
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}>
|
||||
|
|
@ -58,8 +82,6 @@ export default function Dashboard({customers}: CustomerProps) {
|
|||
</a>
|
||||
})}
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue