Skip to content

Commit

Permalink
seller dashboard added
Browse files Browse the repository at this point in the history
  • Loading branch information
@Ansh101112
Ansh101112 committed Aug 1, 2024
1 parent 7709ff7 commit 2234eb6
Showing 1 changed file with 224 additions and 0 deletions.
224 changes: 224 additions & 0 deletions dashboard/sellerdashboard.html
View file
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/bootstrap@5.3.3/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/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"
></script>
</body>
</html>

0 comments on commit 2234eb6

Please sign in to comment.