Laravel 8 E-Commerce - Display Data On Admin Dashboard
In this video, we will learn how to display data on the admin dashboard in our e-commerce application.
Let's explore how to achieve this.
Switch to your project and open the AdminDashboardComponent.php class file.
Inside the render method, let's retrieve the latest orders:
<?php
namespace App\Http\Livewire\Admin;
use App\Models\Order;
use Carbon\Carbon;
use Livewire\Component;
class AdminDashboardComponent extends Component
{
public function render()
{
$orders = Order::orderBy('created_at','DESC')->get()->take(10);
$totalSales = Order::where('status','delivered')->count();
$totalRevenue = Order::where('status','delivered')->sum('total');
$todaySales = Order::where('status','delivered')->whereDate('created_at',Carbon::today())->count();
$todayRevenue = Order::where('status','delivered')->whereDate('created_at',Carbon::today())->sum('total');
return view('livewire.admin.admin-dashboard-component',[
'orders'=>$orders,
'totalSales'=>$totalSales,
'totalRevenue'=>$totalRevenue,
'todaySales' => $todaySales,
'todayRevenue' => $todayRevenue
])->layout('layouts.base');
}
}
Next, open the admin-dasboard-component.blade.php view file and add the following code:
<div class="content">
<style>
.content {
padding-top: 40px;
padding-bottom: 40px;
}
.icon-stat {
display: block;
overflow: hidden;
position: relative;
padding: 15px;
margin-bottom: 1em;
background-color: #fff;
border-radius: 4px;
border: 1px solid #ddd;
}
.icon-stat-label {
display: block;
color: #999;
font-size: 13px;
}
.icon-stat-value {
display: block;
font-size: 28px;
font-weight: 600;
}
.icon-stat-visual {
position: relative;
top: 22px;
display: inline-block;
width: 32px;
height: 32px;
border-radius: 4px;
text-align: center;
font-size: 16px;
line-height: 30px;
}
.bg-primary {
color: #fff;
background: #d74b4b;
}
.bg-secondary {
color: #fff;
background: #6685a4;
}
.icon-stat-footer {
padding: 10px 0 0;
margin-top: 10px;
color: #aaa;
font-size: 12px;
border-top: 1px solid #eee;
}
</style>
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="icon-stat">
<div class="row">
<div class="col-xs-8 text-left">
<span class="icon-stat-label">Total Revenue</span>
<span class="icon-stat-value">${{$totalRevenue}}</span>
</div>
<div class="col-xs-4 text-center">
<i class="fa fa-dollar icon-stat-visual bg-primary"></i>
</div>
</div>
<div class="icon-stat-footer">
<i class="fa fa-clock-o"></i> Updated Now
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="icon-stat">
<div class="row">
<div class="col-xs-8 text-left">
<span class="icon-stat-label">Total Sales</span>
<span class="icon-stat-value">{{$totalSales}}</span>
</div>
<div class="col-xs-4 text-center">
<i class="fa fa-gift icon-stat-visual bg-secondary"></i>
</div>
</div>
<div class="icon-stat-footer">
<i class="fa fa-clock-o"></i> Updated Now
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="icon-stat">
<div class="row">
<div class="col-xs-8 text-left">
<span class="icon-stat-label">Today Revenue</span>
<span class="icon-stat-value">${{$todayRevenue}}</span>
</div>
<div class="col-xs-4 text-center">
<i class="fa fa-dollar icon-stat-visual bg-primary"></i>
</div>
</div>
<div class="icon-stat-footer">
<i class="fa fa-clock-o"></i> Updated Now
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="icon-stat">
<div class="row">
<div class="col-xs-8 text-left">
<span class="icon-stat-label">Today Sales</span>
<span class="icon-stat-value">{{$todaySales}}</span>
</div>
<div class="col-xs-4 text-center">
<i class="fa fa-gift icon-stat-visual bg-secondary"></i>
</div>
</div>
<div class="icon-stat-footer">
<i class="fa fa-clock-o"></i> Updated Now
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
Latest Order
</div>
<div class="panel-body">
<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 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>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
That's it! Let's check the result.
Switch to your browser and refresh the page.
You can see the total revenue, total sales, today's revenue, and today's sales displayed on the dashboard.
Additionally, the latest 10 orders are also displayed.
By following these steps, you can easily display data on the admin dashboard in your e-commerce application.
That's all about displaying data on the admin dashboard.
