<div class="container py-4">
<!-- i. Breadcrumb Section -->
<nav aria-label="breadcrumb" class="mb-4">
<ol class="breadcrumb bg-light p-3 rounded-4 shadow-sm border-0">
<li class="breadcrumb-item"><a href="#" class="text-decoration-none text-primary">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">User Dashboard</li>
</ol>
</nav>
<div class="row g-4">
<!-- Sidebar Navigation -->
<div class="col-lg-3">
<div class="card border-0 shadow-sm rounded-4 overflow-hidden">
<div class="card-body p-0">
<div class="p-4 text-center bg-primary text-white">
<div class="position-relative d-inline-block mb-3">
<img src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?w=200" class="rounded-circle border border-4 border-white shadow-sm" width="100" height="100" alt="Profile">
<span class="position-absolute bottom-0 end-0 bg-success border border-2 border-white rounded-circle p-2" title="Online"></span>
</div>
<h6 class="fw-bold mb-0">Alex Thompson</h6>
<small class="opacity-75">Member since Jan 2024</small>
</div>
<div class="list-group list-group-flush pt-2 pb-2">
<a href="#" class="list-group-item list-group-item-action border-0 px-4 py-3 active"><i class="bi bi-grid-1x2 me-3"></i>Dashboard</a>
<a href="#" class="list-group-item list-group-item-action border-0 px-4 py-3"><i class="bi bi-bag-check me-3"></i>My Orders</a>
<a href="#" class="list-group-item list-group-item-action border-0 px-4 py-3"><i class="bi bi-heart me-3"></i>Wishlist</a>
<a href="#" class="list-group-item list-group-item-action border-0 px-4 py-3"><i class="bi bi-geo-alt me-3"></i>Address Book</a>
<a href="#" class="list-group-item list-group-item-action border-0 px-4 py-3"><i class="bi bi-gear me-3"></i>Account Settings</a>
<a href="#" class="list-group-item list-group-item-action border-0 px-4 py-3 text-danger"><i class="bi bi-box-arrow-right me-3"></i>Logout</a>
</div>
</div>
</div>
</div>
<div class="col-lg-9">
<!-- ii. User Profile Information Stats -->
<div class="row g-3 mb-4">
<div class="col-md-4">
<div class="card border-0 shadow-sm rounded-4 p-3 text-center bg-white h-100">
<div class="text-primary fs-2 mb-2"><i class="bi bi-cart-check"></i></div>
<h4 class="fw-bold mb-0">12</h4>
<small class="text-muted">Total Orders</small>
</div>
</div>
<div class="col-md-4">
<div class="card border-0 shadow-sm rounded-4 p-3 text-center bg-white h-100">
<div class="text-warning fs-2 mb-2"><i class="bi bi-clock-history"></i></div>
<h4 class="fw-bold mb-0">02</h4>
<small class="text-muted">Pending Delivery</small>
</div>
</div>
<div class="col-md-4">
<div class="card border-0 shadow-sm rounded-4 p-3 text-center bg-white h-100">
<div class="text-success fs-2 mb-2"><i class="bi bi-wallet2"></i></div>
<h4 class="fw-bold mb-0">$1,450</h4>
<small class="text-muted">Total Spent</small>
</div>
</div>
</div>
<!-- iii. Order History Table -->
<div class="card border-0 shadow-sm rounded-4 mb-4">
<div class="card-body p-4">
<h5 class="fw-bold mb-4">Recent Order History</h5>
<div class="table-responsive">
<table class="table table-hover align-middle mb-0">
<thead class="bg-light bg-opacity-50">
<tr>
<th class="border-0 small text-uppercase">Order ID</th>
<th class="border-0 small text-uppercase">Date</th>
<th class="border-0 small text-uppercase">Status</th>
<th class="border-0 small text-uppercase text-end">Grand Total</th>
</tr>
</thead>
<tbody class="small">
<tr>
<td class="fw-bold text-primary">#ORD-9021</td>
<td>Oct 12, 2024</td>
<td><span class="badge bg-success-subtle text-success rounded-pill px-3 py-2">Delivered</span></td>
<td class="text-end fw-bold">$299.00</td>
</tr>
<tr>
<td class="fw-bold text-primary">#ORD-8854</td>
<td>Oct 05, 2024</td>
<td><span class="badge bg-warning-subtle text-warning rounded-pill px-3 py-2">Processing</span></td>
<td class="text-end fw-bold">$85.50</td>
</tr>
<tr>
<td class="fw-bold text-primary">#ORD-1025</td>
<td>Sep 28, 2024</td>
<td><span class="badge bg-danger-subtle text-danger rounded-pill px-3 py-2">Cancelled</span></td>
<td class="text-end fw-bold">$120.00</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- iv. Account Settings & Address Book -->
<div class="row g-4 mb-5">
<div class="col-md-6">
<div class="card border-0 shadow-sm rounded-4 p-4 h-100">
<h5 class="fw-bold mb-3 d-flex justify-content-between">
Account Info <a href="#" class="btn btn-sm btn-light rounded-pill px-3">Edit</a>
</h5>
<p class="mb-1 fw-bold">Alex Thompson</p>
<p class="text-muted small mb-3">alex.t@example.com</p>
<p class="text-muted small mb-0">+880 1712-345678</p>
</div>
</div>
<div class="col-md-6">
<div class="card border-0 shadow-sm rounded-4 p-4 h-100">
<h5 class="fw-bold mb-3 d-flex justify-content-between">
Shipping Address <a href="#" class="btn btn-sm btn-light rounded-pill px-3">Edit</a>
</h5>
<p class="mb-1 text-muted small"><span class="badge bg-secondary rounded-pill me-2">Home</span></p>
<p class="text-muted small mb-0">12/A, Dhanmondi, Dhaka 1209,<br>Bangladesh</p>
</div>
</div>
</div>
<!-- v. Recently Viewed Products -->
<h5 class="fw-bold mb-4">Recently Viewed</h5>
<div class="row overflow-auto flex-nowrap pb-3 g-3" style="scrollbar-width: thin;">
<div class="col-6 col-md-3">
<div class="card border-0 shadow-sm rounded-4 h-100 text-center p-2">
<img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=200" class="card-img-top rounded-3" alt="Item">
<div class="card-body px-1 py-2">
<h6 class="small fw-bold text-truncate mb-1">Luxury Smart Watch</h6>
<p class="text-primary small fw-bold mb-0">$199.00</p>
</div>
</div>
</div>
<div class="col-6 col-md-3">
<div class="card border-0 shadow-sm rounded-4 h-100 text-center p-2">
<img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=200" class="card-img-top rounded-3" alt="Item">
<div class="card-body px-1 py-2">
<h6 class="small fw-bold text-truncate mb-1">Studio Headphones</h6>
<p class="text-primary small fw-bold mb-0">$299.00</p>
</div>
</div>
</div>
<div class="col-6 col-md-3">
<div class="card border-0 shadow-sm rounded-4 h-100 text-center p-2">
<img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=200" class="card-img-top rounded-3" alt="Item">
<div class="card-body px-1 py-2">
<h6 class="small fw-bold text-truncate mb-1">Red Sport Shoes</h6>
<p class="text-primary small fw-bold mb-0">$85.00</p>
</div>
</div>
</div>
<div class="col-6 col-md-3">
<div class="card border-0 shadow-sm rounded-4 h-100 text-center p-2">
<img src="https://images.unsplash.com/photo-1525966222134-fcfa99b8ae77?w=200" class="card-img-top rounded-3" alt="Item">
<div class="card-body px-1 py-2">
<h6 class="small fw-bold text-truncate mb-1">Classic Sneakers</h6>
<p class="text-primary small fw-bold mb-0">$65.00</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
.breadcrumb-item+.breadcrumb-item::before {
content: ">";
}
.list-group-item.active {
background-color: #f8f9fa;
color: #0d6efd;
border-right: 4px solid #0d6efd !important;
font-weight: bold;
}
.list-group-item {
transition: all 0.2s;
border-radius: 0 !important;
}
.list-group-item:hover:not(.active) {
background-color: #f8f9fa;
transform: translateX(5px);
}
</style>