Laravel E-Commerce Project - Display Data On User Dashboard
In this video, we will learn how to display data on the user dashboard.
Let's explore how to achieve this. First, switch to the project and open the UserDashboardComponent class file.
Inside the render method, fetch the latest orders according to the logged-in user and also get the total cost, total purchase, total delivered, and total canceled:
<?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');
}
}
Next, 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, let's test the functionality. Switch to the browser and refresh the page. You should see the user's data on the dashboard.
Try logging out and logging in with another user. You should see the data for the new user on the dashboard.
By following these steps, you can display data on the user dashboard.
