Spaces:

KhingLeo1
/

shopsphere-pro-admin-dashboard

Running

shopsphere-pro-admin-dashboard / admin-products.html

can you create admin page to the e-commerce where admin can monitor sales and also update , delete and add new products and ad graph chart to the admin page where he can read sale made in month and total in year

b1bcf9c verified 6 months ago

raw

history blame contribute delete

9.29 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Product Management \| ShopSphere</title>
	<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
	<link rel="stylesheet" href="style.css">
	<script src="https://cdn.tailwindcss.com"></script>
	<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
	<script src="https://unpkg.com/feather-icons"></script>
	</head>
	<body class="bg-gray-100">
	<admin-sidebar></admin-sidebar>

	<div class="ml-64 p-8">
	<div class="flex justify-between items-center mb-8">
	<h1 class="text-3xl font-bold">Product Management</h1>
	<div class="flex items-center gap-4">
	<div class="relative">
	<input type="text" placeholder="Search products..." class="pl-10 pr-4 py-2 border rounded-lg">
	<i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i>
	</div>
	<a href="/admin-add-product.html" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center">
	<i data-feather="plus" class="mr-2"></i>
	Add Product
	</a>
	</div>
	</div>

	<div class="bg-white rounded-lg shadow overflow-hidden">
	<div class="px-6 py-4 border-b flex justify-between items-center">
	<h3 class="text-lg font-bold">All Products</h3>
	<div class="flex items-center">
	<span class="mr-2 text-gray-600">Show:</span>
	<select class="border rounded-md px-3 py-1">
	<option>All</option>
	<option>Active</option>
	<option>Out of Stock</option>
	<option>Archived</option>
	</select>
	</div>
	</div>
	<div class="overflow-x-auto">
	<table class="min-w-full divide-y divide-gray-200">
	<thead class="bg-gray-50">
	<tr>
	<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Product</th>
	<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Category</th>
	<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Price</th>
	<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Stock</th>
	<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
	<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
	</tr>
	</thead>
	<tbody class="bg-white divide-y divide-gray-200">
	<tr>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="flex items-center">
	<div class="flex-shrink-0 h-10 w-10">
	<img src="http://static.photos/technology/200x200/1" class="h-10 w-10 rounded-md">
	</div>
	<div class="ml-4">
	<div class="text-sm font-medium text-gray-900">Wireless Headphones</div>
	<div class="text-sm text-gray-500">SKU: WH-2023</div>
	</div>
	</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Electronics</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$99.99</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">48</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
	<a href="/admin-edit-product.html" class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</a>
	<a href="#" class="text-red-600 hover:text-red-900">Delete</a>
	</td>
	</tr>
	<tr>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="flex items-center">
	<div class="flex-shrink-0 h-10 w-10">
	<img src="http://static.photos/technology/200x200/2" class="h-10 w-10 rounded-md">
	</div>
	<div class="ml-4">
	<div class="text-sm font-medium text-gray-900">Bluetooth Speaker</div>
	<div class="text-sm text-gray-500">SKU: BS-2023</div>
	</div>
	</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Electronics</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$59.99</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">12</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Low Stock</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
	<a href="/admin-edit-product.html" class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</a>
	<a href="#" class="text-red-600 hover:text-red-900">Delete</a>
	</td>
	</tr>
	<tr>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="flex items-center">
	<div class="flex-shrink-0 h-10 w-10">
	<img src="http://static.photos/fashion/200x200/1" class="h-10 w-10 rounded-md">
	</div>
	<div class="ml-4">
	<div class="text-sm font-medium text-gray-900">Designer Watch</div>
	<div class="text-sm text-gray-500">SKU: DW-2023</div>
	</div>
	</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Fashion</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$199.99</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">25</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
	<a href="/admin-edit-product.html" class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</a>
	<a href="#" class="text-red-600 hover:text-red-900">Delete</a>
	</td>
	</tr>
	</tbody>
	</table>
	</div>
	<div class="px-6 py-4 border-t flex items-center justify-between">
	<div class="text-sm text-gray-500">Showing <span class="font-medium">1</span> to <span class="font-medium">10</span> of <span class="font-medium">342</span> products</div>
	<div class="flex space-x-2">
	<button class="px-3 py-1 border rounded-md">Previous</button>
	<button class="px-3 py-1 border rounded-md bg-indigo-600 text-white">1</button>
	<button class="px-3 py-1 border rounded-md">2</button>
	<button class="px-3 py-1 border rounded-md">3</button>
	<button class="px-3 py-1 border rounded-md">Next</button>
	</div>
	</div>
	</div>
	</div>

	<script src="components/admin-sidebar.js"></script>
	<script src="script.js"></script>
	<script>
	feather.replace();
	</script>
	</body>
	</html>