Module 7 – Order Management සහ Styling

අපේ application එකේ මූලික λειτουργίες සියල්ල දැන් ක්‍රියාත්මකයි. මේ කොටසේදී අපි එය තවත් ඔපමට්ටම් කරමු. User interface එක ලස්සන කිරීම සහ Admin ට orders delete කිරීමට ඉඩ දීම මෙහිදී සිදු කෙරේ.

පියවර 1: User Dashboard එකේ Status වර්ණ ගැන්වීම 🎨

User ගේ order dashboard එකේ, order status එක ('Pending', 'Approved', 'Rejected') පාටකින් පෙන්වීමෙන් එය තවත් පැහැදිලි කරගන්න පුළුවන්. මේ සඳහා අපි Bootstrap Badges පාවිච්චි කරමු.

`resources/views/order/index.blade.php` file එකේ, status එක පෙන්වන table cell එක මෙසේ වෙනස් කරන්න.

<td>
    @if($order->status == 'Pending')
        <span class="badge bg-warning text-dark">Pending</span>
    @elseif($order->status == 'Approved')
        <span class="badge bg-success">Approved</span>
    @else
        <span class="badge bg-danger">Rejected</span>
    @endif
</td>

දැන් order status එක ඒ ඒ තත්ත්වයට අදාලව ලස්සන පාටකින් පෙනේවි.

පියවර 2: Admin ට Orders Delete කිරීමට ඉඩ දීම 🗑️

සමහර විට ප්‍රතික්ෂේප කළ (Rejected) හෝ පරණ orders පද්ධතියෙන් ඉවත් කිරීමට Admin ට අවශ්‍ය විය හැකිය. අපි ඒ සඳහා delete functionality එක හදමු.

පළමුව, `routes/web.php` file එකේ admin routes group එකට delete route එක ඇතුළත් කරන්න.

Route::delete('/orders/{order}', [AdminOrderController::class, 'destroy'])->name('orders.destroy');

දැන්, `resources/views/admin/orders/index.blade.php` file එකේ 'Actions' column එකට delete button එක ඇතුළත් කරන්න. Approve/Reject form වලට පසුව මෙය යොදන්න.

<form action="{{ route('admin.orders.destroy', $order) }}" method="POST" class="d-inline" onsubmit="return confirm('Are you sure you want to delete this order?');">
    @csrf
    @method('DELETE')
    <button type="submit" class="btn btn-dark btn-sm">Delete</button>
</form>

අවසාන වශයෙන්, `app/Http/Controllers/Admin/OrderController.php` එකට ගොස් `destroy` function එක ලියන්න.

public function destroy(Order $order)
{
    $order->delete();
    return back()->with('success', 'Order deleted successfully.');
}

දැන් admin dashboard එකේ ඇති delete button එක මගින් orders ඉවත් කිරීමට ඔබට පුළුවන්.

පියවර 3: Master Layout එකක් සෑදීම 뼈

අපේ හැම පිටුවකම Navbar එක සහ Footer එක නැවත නැවතත් යොදනවා. කේතය නැවත නැවත ලිවීමෙන් වැළකීමට අපි Master Layout එකක් හදාගමු. මේ සඳහා Blade හි `@extends` සහ `@yield` භාවිතා කරනවා.

`resources/views/` තුළ `layouts` නමින් folder එකක් සාදා, ඒ තුළ `app.blade.php` නමින් file එකක් සාදන්න. එයට පහත මූලික කේතය යොදන්න.

<!DOCTYPE html>
<html lang="si">
<head>
    <meta charset="UTF-8">
    <title>Pizza App</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <!-- Your Navbar Code Goes Here -->
    </nav>

    <main class="container mt-4">
        @yield('content')
    </main>

    <footer class="text-center py-4 mt-5 bg-dark text-white">
        <p>© 2025 Laravel සිංහලෙන්.</p>
    </footer>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

දැන්, උදාහරණයක් ලෙස `order/index.blade.php` file එකේ මුදුනටම `@extends('layouts.app')` ලෙස යොදා, අන්තර්ගතය `@section('content')` සහ `@endsection` අතර යොදන්න. අනවශ්‍ය HTML tags සියල්ල ඉවත් කරන්න.

පියවර 4: Bootstrap Cards භාවිතයෙන් Styling කිරීම ✨

අපේ පිටු වල අන්තර්ගතය Bootstrap Cards තුළට දැමීමෙන් එයට පිළිවෙලක් සහ ලස්සනක් එකතු කරගන්න පුළුවන්.

උදාහරණයක් ලෙස, `order/index.blade.php` file එකේ table එක මෙසේ card එකක් තුළට දමන්න.

@extends('layouts.app')

@section('content')
<div class="card">
    <div class="card-header">
        <h2>My Orders</h2>
    </div>
    <div class="card-body">
        <!-- Your table code goes here -->
    </div>
</div>
@endsection

මේ ආකාරයට අනෙක් පිටුත් (Order form, Admin dashboard) සකසා ගන්න.

නියමයි! දැන් අපේ application එකේ පෙනුම සහ ක්‍රියාකාරීත්වය තවත් වැඩි දියුණු වෙලා. ඊළඟට අපි තවත් අමතර features කිහිපයක් එකතු කරමු.

« පෙර පාඩම: Admin Side ඊළඟ පාඩම: Extra Features »