In this video, we are going to learn about showing orders in the Admin Panel.

So, let's see how we can display orders in the admin panel.

First, let's create a component for Orders.

Switch to the command prompt and create a new Livewire component by running the following command:

php artisan make:livewire admin/AdminOrderComponent

Next, run the application:

php artisan serve

Now, switch to the project and create a route for this component.

Go to the routes directory and open the web.php file.

Inside the admin middleware group route, add the following code:

Route::get('/admin/orders',AdminOrderComponent::class)->name('admin.orders');

Now, open the AdminOrderComponent.php class file and write the following code:

<?php
namespace AppHttpLivewireAdmin;
use AppModelsOrder;
use LivewireComponent;
class AdminOrderComponent extends Component
{    
    public function render()
    {
        $orders = Order::orderBy('created_at','DESC')->paginate(12);
        return view('livewire.admin.admin-order-component',['orders'=>$orders])->layout('layouts.base');
    }
}

Next, open the admin-order-component.blade.php view file and add the following code:

<div>
    <style>
        nav svg{
            height: 20px;
        }
        nav .hidden{
            display: block !important;
        }
    </style>
    <div class=`container` style=`padding: 30px 0;`>        
        <div class=`row`>
            <div class=`col-md-12`>
                <div class=`panel panel-default`>
                    <div class=`panel-heading`>
                        All Orders
                    </div>
                    <div class=`panel-body`>   
                        @if(Session::has('order_message'))
                            <div class=`alert alert-success` role=`alert`>{{Session::get('order_message')}}</div>
                        @endif                     
                        <table class=`table table-striped`>
                            <thead>
                                <tr>
                                    <th>OrderId</th>
                                    <th>Subtotal</th>
                                    <th>Discount</th>
                                    <th>Tax</th>
                                    <th>Total</th>
                                    <th>First Name</th>
                                    <th>Last Name</th>
                                    <th>Mobile</th>
                                    <th>Email</th>
                                    <th>Zipcode</th>
                                    <th>Status</th>
                                    <th>Order Date</th>                                    
                                    <th colspan=`2` class=`text-center`>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($orders as $order)
                                    <tr>
                                        <td>{{$order->id}}</td>
                                        <td>${{$order->subtotal}}</td>
                                        <td>${{$order->discount}}</td>
                                        <td>${{$order->tax}}</td>
                                        <td>${{$order->total}}</td>
                                        <td>{{$order->firstname}}</td>
                                        <td>{{$order->lastname}}</td>
                                        <td>{{$order->mobile}}</td>
                                        <td>{{$order->email}}</td>
                                        <td>{{$order->zipcode}}</td>
                                        <td>{{$order->status}}</td>
                                        <td>{{$order->created_at}}</td>                                        
                                        <td><a href=`{{route('admin.orderdetails',['order_id'=>$order->id])}}` class=`btn btn-info btn-sm`>Details</a></td>                                        
                                        <td></td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                        {{$orders->links()}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Now, open the base.blade.php layout file and add a link for orders inside the admin menu:

<li class=`menu-item`>
	<a title=`All Orders` href=`{{route('admin.orders')}}`>All Orders</a>
</li>

That's it! Let's test it out.

Switch to the browser and refresh the page.

Go to the admin menu and you will see the `All Orders` link.

Click on this link and you will see all orders.

And that's how you can show orders in the admin panel.