Admin: Displaying All Customer Orders

Hi everyone, welcome back to the Laravel E-Commerce Project Tutorial. In this video, we will implement the functionality to display the list of all customer orders in the admin panel.

1. Create the `orders` Function in `AdminController`

   Open your `AdminController` and create the `orders` function to fetch all orders, ordered by creation date, and paginate the results.

   public function orders()
   {
       // Fetch orders, ordered by most recent first
       $orders = Order::orderBy("created_at","DESC")->paginate(12);
       // Load the admin orders view
       return view("admin.orders",compact("orders"));
   }
   

2. Define the Route

   Define the route for the admin orders page in `web.php` (or your admin route file):

   Route::get("/admin/orders",[AdminController::class,"orders"])->name("admin.orders");
   

3. Create the Orders View (`orders.blade.php`)

   Create a new view file named `orders.blade.php` in the `resources/views/admin` directory. Extend the admin layout and integrate the table structure.

   <x-app-layout>
   </x-app-layout>
   

   Displaying Order Data

   Inside the table body, loop through the `$orders` collection to display each order'sdetails:

   <table class="table table-striped table-bordered">
       <!-- Table Header (Thead) goes here -->
       <tbody>
           @foreach ($orders as $order)
           <tr>
               <td class="text-center">{{ $order->id }}</td>
               <td class="text-center">{{ $order->name }}</td>
               <td class="text-center">{{ $order->total }}</td>
               <td class="text-center">
                   @if($order->status == "delivered")
                       <span class="badge bg-success">Delivered</span>
                   @elseif($order->status == "canceled")
                       <span class="badge bg-danger">Canceled</span>
                   @else
                       <span class="badge bg-warning">Ordered</span>
                   @endif
               </td>
               <td class="text-center">{{ $order->created_at }}</td>
               <td class="text-center">{{ $order->orderItems->count() }}</td>
               <td class="text-center">{{ $order->delivered_date }}</td>
               <td class="text-center">
                   <a href="{{ route("admin.order.details", ["order_id" => $order->id]) }}">
                       <div class="list-icon-function view-icon">
                           <div class="item eye">
                               <i class="fa fa-eye"></i>
                           </div>
                       </div>
                   </a>
               </td>
           </tr>
           @endforeach
       </tbody>
   </table>
   

   Adding Pagination

   Below the table, add the pagination links:

   <div class="divider"></div>
   <div class="flex items-center justify-between flex-wrap gap10 wgp-pagination">
       {{$orders->links("pagination::bootstrap-5")}}
   </div>
   

4. Update Admin Layout

   Ensure the Orders link is correctly added to your admin navigation menu using {{ route("admin.orders") }}.

Verification and Testing 📦

Log into the admin panel and click on the Orders link. You should now see a list of all orders placed by users, along with their current status, total value, and an icon to view the full details (which will be implemented in the next step).