Added purchases to customer

resources/js/Pages/Customer.tsx

@@ -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 ? customer.deposit : 0} kr</p>
-                                    <p>Inbetalad summa: {customer.deposit} 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>
                    
                 

resources/js/Pages/Dashboard.tsx

@@ -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
+                    <input
-                            className='input my-4'
+                        className='input my-4'
-                            type="text"
+                        type="text"
-                            value={searchItem}
+                        value={searchItem}
-                            onChange={handleInputChange}
+                        onChange={handleInputChange}
-                            placeholder='Skriv för att söka'
+                        placeholder='Skriv för att söka'
-                        />
+                    />
-                        <div className='container is-centered'>
+                    <div>
-                            {filteredCustomers && filteredCustomers.map( customer => {
+                    <ul className='grid is-col-min-2 is-column-gap-1 mb-5'>
-                                return <a key={customer.id} className="box is-flex is-justify-content-space-between" href={`/customer/` + customer.id}>
+                        { letterArray && letterArray.map( letter => {
-                                    <p>{customer.name}</p>
+                             return <li className={`${activeTab == letter ? "is-active" : ""} cell button letter is-small is-white`} onClick={ () => [setActiveTab(letter) ,handleInputClick(letter)]}>
-                                    <span className="icon has-text-black">
+                                 {letter}
-                                        <FontAwesomeIcon icon={faArrowRight} />
+                             </li>
-                                    </span>
+                            })
-                                </a>
+                        }
-                            })}
+                        <li className='cell button is-small is-white' onClick={ () => [setActiveTab(""), setFilteredCustomers(customers), setSearchItem("") ]}>
-                        </div>
+                                 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>