📘 Module 7: POS (Billing System) UI

Billing ਕਰਨ සඳහා නව UI එකක් නිර්මාණය කරමු. පළමුව, sales handle කිරීමට නව Controller එකක් සාදා, ඊට අදාළ route එක සකස් කරමු.

php artisan make:controller SaleController

දැන් routes/web.php file එකට "New Sale" page එක පෙන්වීමට route එකක් එකතු කරමු.

// In routes/web.php
use App\Http\Controllers\SaleController;

// ... other routes
Route::get('/sales/create', [SaleController::class, 'create'])->name('sales.create')->middleware('auth');
            

Controller එකේ create method එක තුල, database එකෙන් සියලුම products ගෙන view එකට pass කරමු.

Controller Logic: app/Http/Controllers/SaleController.php

use App\Models\Product; // Import Product model
use Illuminate\Http\Request;

class SaleController extends Controller
{
    public function create()
    {
        $products = Product::all();
        return view('sales.create', compact('products'));
    }
}
            

දැන් view file එක සාදමු. මෙහි product තේරීමට dropdown එකක්, quantity ඇතුලත් කිරීමට input එකක්, සහ JavaScript භාවිතයෙන් මුළු මුදල auto-calculate වන ආකාරය සකස් කරමු.

View: resources/views/sales/create.blade.php

@extends('layouts.app')

@section('content')
<div class="container">
    <h1>New Sale / Billing</h1>
    
    <!-- Product Selection Form -->
    <div class="row mb-3">
        <div class="col-md-4">
            <label for="product" class="form-label">Select Product</label>
            <select id="product" class="form-select">
                <option selected disabled>Choose...</option>
                @foreach($products as $product)
                    <option value="{{ $product->id }}" data-price="{{ $product->price }}">
                        {{ $product->name }}
                    </option>
                @endforeach
            </select>
        </div>
        <div class="col-md-2">
            <label for="quantity" class="form-label">Quantity</label>
            <input type="number" id="quantity" class="form-control" value="1" min="1">
        </div>
        <div class="col-md-2">
            <label for="price" class="form-label">Price</label>
            <input type="text" id="price" class="form-control" readonly>
        </div>
        <div class="col-md-2">
            <label for="total" class="form-label">Total</label>
            <input type="text" id="total" class="form-control" readonly>
        </div>
        <div class="col-md-2 d-flex align-items-end">
            <button class="btn btn-primary w-100">Add to Cart</button>
        </div>
    </div>
    <!-- Cart Display Table -->
</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const productSelect = document.getElementById('product');
        const quantityInput = document.getElementById('quantity');
        const priceInput = document.getElementById('price');
        const totalInput = document.getElementById('total');

        function calculateTotal() {
            const selectedOption = productSelect.options[productSelect.selectedIndex];
            if (!selectedOption.value || selectedOption.disabled) {
                priceInput.value = '';
                totalInput.value = '';
                return;
            }
            
            const price = parseFloat(selectedOption.getAttribute('data-price'));
            const quantity = parseInt(quantityInput.value);
            const total = price * quantity;
            
            priceInput.value = price.toFixed(2);
            totalInput.value = total.toFixed(2);
        }

        productSelect.addEventListener('change', calculateTotal);
        quantityInput.addEventListener('input', calculateTotal);
    });
</script>
@endpush
@endsection
            

Layout file එකේ (app.blade.php) </body> tag එකට පෙර @stack('scripts') යන්න එකතු කිරීමට වග බලා ගන්න.

"Add to Cart" button එක click කළ විට, තෝරාගත් භාණ්ඩය පහළින් ඇති table එකකට (cart) එකතු වන ලෙස සකස් කරමු. මෙය server එකට data යැවීමට පෙර, browser එක තුළම (client-side) සිදුවේ.

ඉහත create.blade.php file එකේ "Cart Display Table" comment එකට පහළින් මෙම HTML code එක එකතු කරන්න.

<!-- Cart Display Table -->
<table class="table">
    <thead>
        <tr>
            <th>Product</th>
            <th>Quantity</th>
            <th>Price</th>
            <th>Total</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody id="cart-body">
        <!-- Cart items will be added here dynamically -->
    </tbody>
</table>
<h3 class="text-end">Grand Total: <span id="grand-total">0.00</span></h3>
            

ඉන්පසු, JavaScript code එක update කර cart එකට item එකතු කිරීමේ functionality එක හදමු.