In this video we are going to learn about Display Data On Admin Dashboard.
So let see how can we Display Data On Admin Dashboard.
Switch to the project and lets open the AdminDashboardComponent.php class file
Now here inside the render method lets get the latest orders.
Now lets open the admin-dasboard-component.blade.php view file and write the following code.
Now its done so lets check it so switch to browser and refresh the page.
And here you can see the total revenue, total sales, today revenue and today sales.
And here its showing the latest 10 orders.
So in this way you can Display Data On Admin Dashboard so that's all about Display Data On Admin Dashboard.
So let see how can we Display Data On Admin Dashboard.
Switch to the project and lets open the AdminDashboardComponent.php class file
Now here inside the render method lets get 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');
}
}
Now lets open the admin-dasboard-component.blade.php view file and write 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>
Now its done so lets check it so switch to browser and refresh the page.
And here you can see the total revenue, total sales, today revenue and today sales.
And here its showing the latest 10 orders.
So in this way you can Display Data On Admin Dashboard so that's all about Display Data On Admin Dashboard.
