|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Shop Inventory System</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.sidebar { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.sidebar.collapsed { |
|
|
width: 70px; |
|
|
} |
|
|
.sidebar.collapsed .sidebar-text { |
|
|
display: none; |
|
|
} |
|
|
.sidebar.collapsed .logo-text { |
|
|
display: none; |
|
|
} |
|
|
.sidebar.collapsed .menu-item { |
|
|
justify-content: center; |
|
|
} |
|
|
.main-content { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.main-content.expanded { |
|
|
margin-left: 70px; |
|
|
} |
|
|
@media (max-width: 768px) { |
|
|
.sidebar { |
|
|
position: fixed; |
|
|
z-index: 1000; |
|
|
left: -250px; |
|
|
} |
|
|
.sidebar.open { |
|
|
left: 0; |
|
|
} |
|
|
.main-content { |
|
|
margin-left: 0 !important; |
|
|
} |
|
|
.mobile-menu-btn { |
|
|
display: block !important; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100"> |
|
|
<div class="flex h-screen overflow-hidden"> |
|
|
|
|
|
<div class="sidebar bg-indigo-800 text-white w-64 flex-shrink-0 flex flex-col"> |
|
|
<div class="p-4 flex items-center border-b border-indigo-700"> |
|
|
<i class="fas fa-boxes text-2xl mr-3"></i> |
|
|
<span class="logo-text text-xl font-bold">ShopStock</span> |
|
|
<button id="toggleSidebar" class="ml-auto md:hidden"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<div class="mb-6"> |
|
|
<div class="text-xs uppercase text-indigo-400 mb-2 sidebar-text">Main</div> |
|
|
<a href="#" class="menu-item flex items-center py-2 px-3 rounded-lg bg-indigo-700 text-white mb-1"> |
|
|
<i class="fas fa-tachometer-alt mr-3"></i> |
|
|
<span class="sidebar-text">Dashboard</span> |
|
|
</a> |
|
|
<a href="#" class="menu-item flex items-center py-2 px-3 rounded-lg hover:bg-indigo-700 text-white mb-1"> |
|
|
<i class="fas fa-box-open mr-3"></i> |
|
|
<span class="sidebar-text">Inventory</span> |
|
|
</a> |
|
|
<a href="#" class="menu-item flex items-center py-2 px-3 rounded-lg hover:bg-indigo-700 text-white mb-1"> |
|
|
<i class="fas fa-tags mr-3"></i> |
|
|
<span class="sidebar-text">Categories</span> |
|
|
</a> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<div class="text-xs uppercase text-indigo-400 mb-2 sidebar-text">Operations</div> |
|
|
<a href="#" class="menu-item flex items-center py-2 px-3 rounded-lg hover:bg-indigo-700 text-white mb-1"> |
|
|
<i class="fas fa-cart-plus mr-3"></i> |
|
|
<span class="sidebar-text">Purchases</span> |
|
|
</a> |
|
|
<a href="#" class="menu-item flex items-center py-2 px-3 rounded-lg hover:bg-indigo-700 text-white mb-1"> |
|
|
<i class="fas fa-cash-register mr-3"></i> |
|
|
<span class="sidebar-text">Sales</span> |
|
|
</a> |
|
|
<a href="#" class="menu-item flex items-center py-2 px-3 rounded-lg hover:bg-indigo-700 text-white mb-1"> |
|
|
<i class="fas fa-exchange-alt mr-3"></i> |
|
|
<span class="sidebar-text">Transfers</span> |
|
|
</a> |
|
|
</div> |
|
|
<div> |
|
|
<div class="text-xs uppercase text-indigo-400 mb-2 sidebar-text">Reports</div> |
|
|
<a href="#" class="menu-item flex items-center py-2 px-3 rounded-lg hover:bg-indigo-700 text-white mb-1"> |
|
|
<i class="fas fa-chart-line mr-3"></i> |
|
|
<span class="sidebar-text">Stock Report</span> |
|
|
</a> |
|
|
<a href="#" class="menu-item flex items-center py-2 px-3 rounded-lg hover:bg-indigo-700 text-white mb-1"> |
|
|
<i class="fas fa-chart-pie mr-3"></i> |
|
|
<span class="sidebar-text">Sales Report</span> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-auto p-4 border-t border-indigo-700"> |
|
|
<a href="#" class="menu-item flex items-center py-2 px-3 rounded-lg hover:bg-indigo-700 text-white"> |
|
|
<i class="fas fa-cog mr-3"></i> |
|
|
<span class="sidebar-text">Settings</span> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="main-content flex-1 flex flex-col overflow-hidden"> |
|
|
|
|
|
<header class="bg-white shadow-sm"> |
|
|
<div class="flex items-center justify-between p-4"> |
|
|
<div class="flex items-center"> |
|
|
<button id="mobileMenuBtn" class="mobile-menu-btn mr-4 text-gray-600 hidden"> |
|
|
<i class="fas fa-bars text-xl"></i> |
|
|
</button> |
|
|
<h1 class="text-xl font-semibold text-gray-800">Inventory Management</h1> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="relative"> |
|
|
<i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i> |
|
|
<input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<i class="fas fa-bell text-xl text-gray-600"></i> |
|
|
<span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="h-8 w-8 rounded-full mr-2"> |
|
|
<span class="hidden md:inline">John Doe</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="flex-1 overflow-y-auto p-6"> |
|
|
<div class="mb-6 flex flex-col md:flex-row md:items-center md:justify-between"> |
|
|
<div> |
|
|
<h2 class="text-2xl font-bold text-gray-800">Product Inventory</h2> |
|
|
<p class="text-gray-600">Manage your shop's products and stock levels</p> |
|
|
</div> |
|
|
<div class="mt-4 md:mt-0"> |
|
|
<button id="addProductBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center"> |
|
|
<i class="fas fa-plus mr-2"></i> Add Product |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> |
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-gray-500 text-sm">Total Products</p> |
|
|
<h3 class="text-2xl font-bold">1,248</h3> |
|
|
</div> |
|
|
<div class="bg-indigo-100 p-3 rounded-full"> |
|
|
<i class="fas fa-box text-indigo-600 text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<span class="text-green-500 text-sm font-medium"><i class="fas fa-arrow-up mr-1"></i> 12.5%</span> |
|
|
<span class="text-gray-500 text-sm ml-2">vs last month</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-gray-500 text-sm">Low Stock</p> |
|
|
<h3 class="text-2xl font-bold">87</h3> |
|
|
</div> |
|
|
<div class="bg-red-100 p-3 rounded-full"> |
|
|
<i class="fas fa-exclamation text-red-600 text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<span class="text-red-500 text-sm font-medium"><i class="fas fa-arrow-up mr-1"></i> 5.2%</span> |
|
|
<span class="text-gray-500 text-sm ml-2">vs last month</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-gray-500 text-sm">Out of Stock</p> |
|
|
<h3 class="text-2xl font-bold">24</h3> |
|
|
</div> |
|
|
<div class="bg-yellow-100 p-3 rounded-full"> |
|
|
<i class="fas fa-times text-yellow-600 text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<span class="text-green-500 text-sm font-medium"><i class="fas fa-arrow-down mr-1"></i> 8.3%</span> |
|
|
<span class="text-gray-500 text-sm ml-2">vs last month</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-gray-500 text-sm">Categories</p> |
|
|
<h3 class="text-2xl font-bold">15</h3> |
|
|
</div> |
|
|
<div class="bg-green-100 p-3 rounded-full"> |
|
|
<i class="fas fa-tags text-green-600 text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<span class="text-green-500 text-sm font-medium"><i class="fas fa-arrow-up mr-1"></i> 3.1%</span> |
|
|
<span class="text-gray-500 text-sm ml-2">vs last month</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow overflow-hidden"> |
|
|
<div class="p-4 border-b flex flex-col md:flex-row md:items-center md:justify-between"> |
|
|
<div class="mb-4 md:mb-0"> |
|
|
<div class="relative max-w-xs"> |
|
|
<i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i> |
|
|
<input type="text" placeholder="Search products..." class="pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent w-full"> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="flex items-center"> |
|
|
<label class="mr-2 text-gray-600">Filter:</label> |
|
|
<select class="border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
<option>All Products</option> |
|
|
<option>Low Stock</option> |
|
|
<option>Out of Stock</option> |
|
|
<option>Recently Added</option> |
|
|
</select> |
|
|
</div> |
|
|
<button class="text-gray-600 hover:text-gray-800"> |
|
|
<i class="fas fa-download"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full divide-y divide-gray-200"> |
|
|
<thead class="bg-gray-50"> |
|
|
<tr> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Product</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Category</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">SKU</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Price</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Stock</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> |
|
|
<th scope="col" class="px-6 py-3 text-right 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 class="h-10 w-10 rounded" src="https://via.placeholder.com/40" alt=""> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium text-gray-900">Premium Headphones</div> |
|
|
<div class="text-sm text-gray-500">Audio</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">Electronics</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">PRD-001</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">$199.99</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">45</div> |
|
|
</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">In Stock</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> |
|
|
<button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-edit"></i></button> |
|
|
<button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button> |
|
|
</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 class="h-10 w-10 rounded" src="https://via.placeholder.com/40" alt=""> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium text-gray-900">Wireless Mouse</div> |
|
|
<div class="text-sm text-gray-500">Computer Accessories</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">Electronics</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">PRD-002</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">$29.99</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">5</div> |
|
|
</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-right text-sm font-medium"> |
|
|
<button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-edit"></i></button> |
|
|
<button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button> |
|
|
</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 class="h-10 w-10 rounded" src="https://via.placeholder.com/40" alt=""> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium text-gray-900">Bluetooth Speaker</div> |
|
|
<div class="text-sm text-gray-500">Audio</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">Electronics</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">PRD-003</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">$79.99</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">0</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Out of Stock</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> |
|
|
<button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-edit"></i></button> |
|
|
<button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button> |
|
|
</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 class="h-10 w-10 rounded" src="https://via.placeholder.com/40" alt=""> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium text-gray-900">Smart Watch</div> |
|
|
<div class="text-sm text-gray-500">Wearables</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">Electronics</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">PRD-004</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">$249.99</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">18</div> |
|
|
</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">In Stock</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> |
|
|
<button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-edit"></i></button> |
|
|
<button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button> |
|
|
</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 class="h-10 w-10 rounded" src="https://via.placeholder.com/40" alt=""> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium text-gray-900">USB-C Cable</div> |
|
|
<div class="text-sm text-gray-500">Cables</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">Accessories</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">PRD-005</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">$12.99</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">3</div> |
|
|
</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-right text-sm font-medium"> |
|
|
<button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-edit"></i></button> |
|
|
<button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button> |
|
|
</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">5</span> of <span class="font-medium">24</span> results |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-3 py-1 border rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">Previous</button> |
|
|
<button class="px-3 py-1 border rounded-md text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700">1</button> |
|
|
<button class="px-3 py-1 border rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">2</button> |
|
|
<button class="px-3 py-1 border rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">3</button> |
|
|
<button class="px-3 py-1 border rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">Next</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="addProductModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
|
|
<div class="bg-white rounded-lg shadow-xl w-full max-w-2xl"> |
|
|
<div class="border-b px-6 py-4 flex items-center justify-between"> |
|
|
<h3 class="text-lg font-semibold text-gray-900">Add New Product</h3> |
|
|
<button id="closeModal" class="text-gray-400 hover:text-gray-500"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<form> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Product Name</label> |
|
|
<input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Category</label> |
|
|
<select class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
<option>Select Category</option> |
|
|
<option>Electronics</option> |
|
|
<option>Clothing</option> |
|
|
<option>Home & Kitchen</option> |
|
|
<option>Books</option> |
|
|
<option>Toys</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">SKU</label> |
|
|
<input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Barcode</label> |
|
|
<input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Purchase Price</label> |
|
|
<div class="relative"> |
|
|
<span class="absolute left-3 top-1/2 transform -translate-y-1/2">$</span> |
|
|
<input type="number" step="0.01" class="w-full pl-8 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Selling Price</label> |
|
|
<div class="relative"> |
|
|
<span class="absolute left-3 top-1/2 transform -translate-y-1/2">$</span> |
|
|
<input type="number" step="0.01" class="w-full pl-8 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Initial Stock</label> |
|
|
<input type="number" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Reorder Level</label> |
|
|
<input type="number" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
</div> |
|
|
<div class="md:col-span-2"> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Description</label> |
|
|
<textarea rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"></textarea> |
|
|
</div> |
|
|
<div class="md:col-span-2"> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Product Image</label> |
|
|
<div class="mt-1 flex items-center"> |
|
|
<span class="inline-block h-12 w-12 rounded-full overflow-hidden bg-gray-100"> |
|
|
<svg class="h-full w-full text-gray-300" fill="currentColor" viewBox="0 0 24 24"> |
|
|
<path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" /> |
|
|
</svg> |
|
|
</span> |
|
|
<button type="button" class="ml-5 bg-white py-2 px-3 border border-gray-300 rounded-md shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> |
|
|
Upload |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-6 flex justify-end space-x-3"> |
|
|
<button type="button" id="cancelAddProduct" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> |
|
|
Cancel |
|
|
</button> |
|
|
<button type="submit" class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> |
|
|
Save Product |
|
|
</button> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const toggleSidebar = document.getElementById('toggleSidebar'); |
|
|
const mobileMenuBtn = document.getElementById('mobileMenuBtn'); |
|
|
const sidebar = document.querySelector('.sidebar'); |
|
|
const mainContent = document.querySelector('.main-content'); |
|
|
|
|
|
|
|
|
toggleSidebar.addEventListener('click', () => { |
|
|
sidebar.classList.toggle('collapsed'); |
|
|
mainContent.classList.toggle('expanded'); |
|
|
}); |
|
|
|
|
|
|
|
|
mobileMenuBtn.addEventListener('click', () => { |
|
|
sidebar.classList.toggle('open'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('click', (e) => { |
|
|
if (window.innerWidth <= 768 && !sidebar.contains(e.target) && e.target !== mobileMenuBtn) { |
|
|
sidebar.classList.remove('open'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const addProductBtn = document.getElementById('addProductBtn'); |
|
|
const addProductModal = document.getElementById('addProductModal'); |
|
|
const closeModal = document.getElementById('closeModal'); |
|
|
const cancelAddProduct = document.getElementById('cancelAddProduct'); |
|
|
|
|
|
addProductBtn.addEventListener('click', () => { |
|
|
addProductModal.classList.remove('hidden'); |
|
|
}); |
|
|
|
|
|
closeModal.addEventListener('click', () => { |
|
|
addProductModal.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
cancelAddProduct.addEventListener('click', () => { |
|
|
addProductModal.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
window.addEventListener('click', (e) => { |
|
|
if (e.target === addProductModal) { |
|
|
addProductModal.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ecoradio/angelo" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
