Fix with Deposit controller endpoint

app/Http/Controllers/CustomerController.php

@@ -51,7 +51,7 @@ class CustomerController extends Controller
      */
     public function show($id)
     {
-        $customer = Customer::with('purchases')->findOrFail($id);
+        $customer = Customer::with('purchases')->with('deposits')->findOrFail($id);
 
         return Inertia::render('Customer', ['customer' => $customer]);
     }

app/Http/Controllers/DepositController.php

@@ -0,0 +1,91 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\Deposit;
+use App\Models\Customer;
+use Illuminate\Http\Request;
+
+class DepositController extends Controller
+{
+     /**
+     * Display a listing of the resource.
+     */
+    public function index()
+    {
+        $deposits = Deposit::get();
+        return $deposits->toJson();
+    }
+
+    /**
+     * Show the form for creating a new resource.
+     */
+    public function create()
+    {
+        //
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     */
+    public function store(Request $request)
+    {
+        $request->validate([
+            'customer_id' => 'required',
+            'deposit' => 'required',
+        ]);
+
+        Deposit::create([
+            'customer_id' => $request->customer_id,
+            'amount' => $request->deposit,
+        ]);
+
+        $customer = Customer::findOrFail($request->customer_id);
+        $customer->deposit = $customer->deposit + $request->deposit;
+        $customer->amount_left = $customer->amount_left + $request->deposit;
+        $customer->save();
+
+        return redirect('customer/' . $request->customer_id);
+    }
+
+    /**
+     * Display the specified resource.
+     */
+    public function show(Purchase $purchase)
+    {
+        //
+    }
+
+    /**
+     * Show the form for editing the specified resource.
+     */
+    public function edit(Purchase $purchase)
+    {
+        //
+    }
+
+    /**
+     * Update the specified resource in storage.
+     */
+    public function update(Request $request, Purchase $purchase)
+    {
+        //
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     */
+    public function destroy($id)
+    {
+        $deposit = Deposit::findOrFail( $id );
+        $customer = Customer::where('id', $deposit->customer_id);
+        $customer->amount_left =  $customer->amount_left + $deposit->amount;
+        $customer->amount_used =  $customer->amount_used - $deposit->amount;
+        $customer->save();
+        $deposit->delete();
+    
+        return response()->json([
+            'success' => true, 'message' => 'Deposit deleted successfully'
+        ]);
+    }
+}

app/Http/Controllers/PurchaseController.php

@@ -84,7 +84,7 @@ class PurchaseController extends Controller
         $purchase->delete();
     
         return response()->json([
-            'success' => true, 'message' => 'Customer deleted successfully'
+            'success' => true, 'message' => 'Purchase deleted successfully'
         ]);
     }
 }

app/Models/Customer.php

@@ -4,6 +4,7 @@ namespace App\Models;
 
 use Illuminate\Database\Eloquent\Model;
 use App\Models\Puchase;
+use App\Models\Deposit;
 
 class Customer extends Model
 {
@@ -15,9 +16,9 @@ class Customer extends Model
     protected $fillable = [
         'name',
         'guardian_name',
-        'deposit',
         'amount left',
         'amount used',
+        'deposit',
         'give_leftover',
     ];
 
@@ -28,4 +29,12 @@ class Customer extends Model
     {
         return $this->hasMany(Purchase::class);
     }
+
+    /**
+     * Get the deposit for the customer.
+     */
+    public function deposits()
+    {
+        return $this->hasMany(Deposit::class);
+    }
 }

app/Models/Deposit.php

@@ -0,0 +1,18 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+
+class Deposit extends Model
+{
+    /**
+     * The attributes that are mass assignable.
+     *
+     * @var array<int, string>
+     */
+    protected $fillable = [
+        'customer_id',
+        'amount',
+    ];
+}

bootstrap/app.php

@@ -16,6 +16,16 @@ return Application::configure(basePath: dirname(__DIR__))
             \App\Http\Middleware\HandleInertiaRequests::class,
             \Illuminate\Http\Middleware\AddLinkHeadersForPreloadedAssets::class,
         ]);
+        $middleware->api(append: [
+            // \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
+            // 'throttle:api',
+            \Illuminate\Cookie\Middleware\EncryptCookies::class,
+            \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
+            \Illuminate\Session\Middleware\StartSession::class,
+            \Illuminate\View\Middleware\ShareErrorsFromSession::class,
+            \Illuminate\Routing\Middleware\SubstituteBindings::class,
+            // \Illuminate\Session\Middleware\AuthenticateSession::class,
+        ]);
 
         //
     })

database/migrations/2025_05_04_110314_create_deposits_table.php

@@ -0,0 +1,29 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('deposits', function (Blueprint $table) {
+            $table->id();
+            $table->integer('customer_id')->nullable();
+            $table->integer('amount')->nullable();
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('deposits');
+    }
+};

resources/css/app.scss

@@ -1,15 +1,25 @@
 @import 'bulma/css/bulma.min.css';
 
-
 :root {
     --button-link-background-color: #0080bb;
     --button-link-color: #fff;
  }
 
+
 .button {
     background-color: var(--button-link-background-color);
     color: var(--button-link-color);
-   
+}
+
+.button.letter {
+    background-color: #fff;
+    color: #000;
+    border: 1px solid lightgray;
+}
+
+.is-active.letter {
+    background-color: var(--button-link-background-color);
+    color: var(--button-link-color);
 }
 
 .navbar-logo {

resources/js/Pages/Customer.tsx

@@ -15,6 +15,10 @@ interface CustomerProps {
             id: number
             amount: number
         }]
+        deposits: [{
+            id: number
+            amount: number
+        }]
     } 
 };
 
@@ -25,7 +29,6 @@ export default function Customer({customer}: CustomerProps) {
         customer_id: customer.id,
         deposit: "",
         id: customer.id
-
     });
 
     const submit: FormEventHandler = (e) => {
@@ -37,7 +40,7 @@ export default function Customer({customer}: CustomerProps) {
 
     const submitDeposit: FormEventHandler = (e) => {
         e.preventDefault()
-        post('/api/register_deposit/' + customer.id, {
+        post(route('register_deposit'), {
             onFinish: () => reset('deposit'),
         }); 
     }
@@ -52,9 +55,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 +95,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 +112,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 +130,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
-                            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>
             

routes/api.php

@@ -4,7 +4,11 @@ use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Route;
 use App\Http\Controllers\CustomerController;
 use App\Http\Controllers\PurchaseController;
+use App\Http\Controllers\DepositController;
 
 Route::post('register_customer', [CustomerController::class, 'store'])->name('register_customer');
-Route::post('register_purchase', [PurchaseController::class, 'store'])->name('register_purchase');
-Route::post('register_deposit/{id}', [CustomerController::class, 'updateDeposit']);
+
+Route::middleware('auth:sanctum')->group(function () {
+    Route::post('register_deposit', [DepositController::class, 'store'])->name('register_deposit');
+    Route::post('register_purchase', [PurchaseController::class, 'store'])->name('register_purchase'); 
+});