-
Notifications
You must be signed in to change notification settings - Fork 518
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1524 from Ansh101112/dashboard
Seller dashboard added
- Loading branch information
Showing
1 changed file
with
224 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,224 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
<title>Seller Dashboard</title> | ||
<link | ||
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" | ||
rel="stylesheet" | ||
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" | ||
crossorigin="anonymous" | ||
/> | ||
<style> | ||
body { | ||
font-family: Arial, sans-serif; | ||
} | ||
|
||
.sidebar { | ||
height: 100vh; | ||
position: fixed; | ||
top: 0; | ||
left: 0; | ||
width: 240px; | ||
background-color: #f8f9fa; | ||
padding-top: 20px; | ||
} | ||
|
||
.main-content { | ||
margin-left: 240px; | ||
padding: 20px; | ||
} | ||
|
||
.nav-link { | ||
font-size: 18px; | ||
} | ||
|
||
.section { | ||
display: none; | ||
} | ||
|
||
.section.active { | ||
display: block; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<div class="sidebar"> | ||
<nav class="nav flex-column"> | ||
<a class="nav-link active" href="#dashboard">Dashboard</a> | ||
<a class="nav-link" href="#product-management">Product Management</a> | ||
<a class="nav-link" href="#order-management">Order Management</a> | ||
<a class="nav-link" href="#profile-settings">Profile Settings</a> | ||
<a class="nav-link" href="#sales-reports">Sales Reports</a> | ||
</nav> | ||
</div> | ||
|
||
<div class="main-content"> | ||
<!-- Dashboard Overview --> | ||
<div id="dashboard" class="section active"> | ||
<h2>Dashboard</h2> | ||
<div class="row"> | ||
<div class="col-md-3"> | ||
<div class="card"> | ||
<div class="card-body"> | ||
<h5 class="card-title">Total Sales</h5> | ||
<p class="card-text">$10,000</p> | ||
</div> | ||
</div> | ||
</div> | ||
<div class="col-md-3"> | ||
<div class="card"> | ||
<div class="card-body"> | ||
<h5 class="card-title">Total Orders</h5> | ||
<p class="card-text">200</p> | ||
</div> | ||
</div> | ||
</div> | ||
<div class="col-md-3"> | ||
<div class="card"> | ||
<div class="card-body"> | ||
<h5 class="card-title">Total Products</h5> | ||
<p class="card-text">50</p> | ||
</div> | ||
</div> | ||
</div> | ||
<div class="col-md-3"> | ||
<div class="card"> | ||
<div class="card-body"> | ||
<h5 class="card-title">Pending Orders</h5> | ||
<p class="card-text">5</p> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<!-- Product Management --> | ||
<div id="product-management" class="section"> | ||
<h2>Product Management</h2> | ||
<button class="btn btn-primary">Add New Product</button> | ||
<table class="table mt-3"> | ||
<thead> | ||
<tr> | ||
<th scope="col">#</th> | ||
<th scope="col">Product Name</th> | ||
<th scope="col">Price</th> | ||
<th scope="col">Stock</th> | ||
<th scope="col">Actions</th> | ||
</tr> | ||
</thead> | ||
<tbody> | ||
<tr> | ||
<th scope="row">1</th> | ||
<td>Product 1</td> | ||
<td>$10</td> | ||
<td>100</td> | ||
<td> | ||
<button class="btn btn-sm btn-warning">Edit</button> | ||
<button class="btn btn-sm btn-danger">Delete</button> | ||
</td> | ||
</tr> | ||
<tr> | ||
<th scope="row">2</th> | ||
<td>Product 2</td> | ||
<td>$20</td> | ||
<td>50</td> | ||
<td> | ||
<button class="btn btn-sm btn-warning">Edit</button> | ||
<button class="btn btn-sm btn-danger">Delete</button> | ||
</td> | ||
</tr> | ||
</tbody> | ||
</table> | ||
</div> | ||
|
||
<!-- Order Management --> | ||
<div id="order-management" class="section"> | ||
<h2>Order Management</h2> | ||
<table class="table"> | ||
<thead> | ||
<tr> | ||
<th scope="col">#</th> | ||
<th scope="col">Order ID</th> | ||
<th scope="col">Customer</th> | ||
<th scope="col">Total</th> | ||
<th scope="col">Status</th> | ||
<th scope="col">Actions</th> | ||
</tr> | ||
</thead> | ||
<tbody> | ||
<tr> | ||
<th scope="row">1</th> | ||
<td>ORD123</td> | ||
<td>John Doe</td> | ||
<td>$100</td> | ||
<td>Pending</td> | ||
<td> | ||
<button class="btn btn-sm btn-success">Mark as Shipped</button> | ||
</td> | ||
</tr> | ||
<tr> | ||
<th scope="row">2</th> | ||
<td>ORD124</td> | ||
<td>Jane Smith</td> | ||
<td>$50</td> | ||
<td>Shipped</td> | ||
<td> | ||
<button class="btn btn-sm btn-primary">View Details</button> | ||
</td> | ||
</tr> | ||
</tbody> | ||
</table> | ||
</div> | ||
|
||
<!-- Profile Settings --> | ||
<div id="profile-settings" class="section"> | ||
<h2>Profile Settings</h2> | ||
<form> | ||
<div class="mb-3"> | ||
<label for="profileName" class="form-label">Name</label> | ||
<input type="text" class="form-control" id="profileName" /> | ||
</div> | ||
<div class="mb-3"> | ||
<label for="profileEmail" class="form-label">Email</label> | ||
<input type="email" class="form-control" id="profileEmail" /> | ||
</div> | ||
<div class="mb-3"> | ||
<label for="profilePassword" class="form-label">Password</label> | ||
<input type="password" class="form-control" id="profilePassword" /> | ||
</div> | ||
<button type="submit" class="btn btn-primary">Save Changes</button> | ||
</form> | ||
</div> | ||
|
||
<!-- Sales Reports --> | ||
<div id="sales-reports" class="section"> | ||
<h2>Sales Reports</h2> | ||
<p>Here you can view and download sales reports.</p> | ||
<button class="btn btn-secondary">Download Report</button> | ||
</div> | ||
</div> | ||
|
||
<script> | ||
document.querySelectorAll('.nav-link').forEach((link) => { | ||
link.addEventListener('click', function () { | ||
document.querySelectorAll('.section').forEach((section) => { | ||
section.classList.remove('active'); | ||
}); | ||
document.querySelector(this.getAttribute('href')).classList.add('active'); | ||
|
||
document.querySelectorAll('.nav-link').forEach((link) => { | ||
link.classList.remove('active'); | ||
}); | ||
this.classList.add('active'); | ||
}); | ||
}); | ||
</script> | ||
<script | ||
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" | ||
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" | ||
crossorigin="anonymous" | ||
></script> | ||
</body> | ||
</html> |