In this video we are going to learn about Display Data On User Dashboard.
So let see how can we Display Data On User Dashboard.
Switch to the project and lets open the UserDashboardComponent class file.
Now here inside the render method lets fetch latest orders according to the logged in user and also get the total cost, total purchase, total delivered and total canceled.
So write here.
Now lets open the user-dashboard-component.blade.php view file and write the following code.
Now its done so lets check so switch to the browser and refresh the page.
and here you can see the user 1 data on this dashboard.
Now lets logout and login with another user.
Now here you can see the another user data.
So in this way you can Display Data On User Dashboard.
So let see how can we Display Data On User Dashboard.
Switch to the project and lets open the UserDashboardComponent class file.
Now here inside the render method lets fetch latest orders according to the logged in user and also get the total cost, total purchase, total delivered and total canceled.
So write here.
<?php
namespace App\\Http\\Livewire\\User;
use App\\Models\\Order;
use Illuminate\\Support\\Facades\\Auth;
use Livewire\\Component;
class UserDashboardComponent extends Component
{
public function render()
{
$orders = Order::orderBy('created_at','DESC')->where('user_id',Auth::user()->id)->get()->take(10);
$totalCost = Order::where('status','!=','canceled')->where('user_id',Auth::user()->id)->sum('total');
$totalPurchase = Order::where('status','!=','canceled')->where('user_id',Auth::user()->id)->count();
$totalDeliverd = Order::where('status','delivered')->where('user_id',Auth::user()->id)->count();
$totalCanceled = Order::where('status','canceled')->where('user_id',Auth::user()->id)->count();
return view('livewire.user.user-dashboard-component',['orders'=>$orders,'totalCost'=>$totalCost,'totalPurchase'=>$totalPurchase,'totalDeliverd'=>$totalDeliverd,'totalCanceled'=>$totalCanceled])->layout('layouts.base');
}
}
Now lets open the user-dashboard-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 Cost</span>
<span class=\"icon-stat-value\">${{$totalCost}}</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 Purchase</span>
<span class=\"icon-stat-value\">{{$totalPurchase}}</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\">Total Delivered</span>
<span class=\"icon-stat-value\">{{$totalDeliverd}}</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\">Total Canceled</span>
<span class=\"icon-stat-value\">{{$totalCanceled}}</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('user.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 so switch to the browser and refresh the page.
and here you can see the user 1 data on this dashboard.
Now lets logout and login with another user.
Now here you can see the another user data.
So in this way you can Display Data On User Dashboard.
