200 lines
6.9 KiB
HTML
200 lines
6.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Inventory Management</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/ky/0.33.3/index.min.js"></script>
|
|
<link rel="stylesheet" href="css/style.css" />
|
|
</head>
|
|
<body class="bg-gray-50 min-h-screen">
|
|
<div class="container mx-auto px-4 py-8">
|
|
<!-- Header -->
|
|
<div class="mb-8">
|
|
<h1 class="text-4xl font-bold text-gray-800 mb-2">
|
|
Inventory Management
|
|
</h1>
|
|
<p class="text-gray-600">Manage your inventory items efficiently</p>
|
|
<p class="text-gray-300">Created by Syahdan & Claude Sonnet 4</p>
|
|
</div>
|
|
|
|
<!-- Add New Item Form -->
|
|
<div class="bg-white rounded-lg shadow-md p-6 mb-8">
|
|
<h2 class="text-2xl font-semibold text-gray-800 mb-4">Add New Item</h2>
|
|
<form id="addItemForm" class="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
<div>
|
|
<label
|
|
for="itemName"
|
|
class="block text-sm font-medium text-gray-700 mb-1"
|
|
>Item Name</label
|
|
>
|
|
<input
|
|
type="text"
|
|
id="itemName"
|
|
name="name"
|
|
required
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label
|
|
for="itemPrice"
|
|
class="block text-sm font-medium text-gray-700 mb-1"
|
|
>Price ($)</label
|
|
>
|
|
<input
|
|
type="number"
|
|
id="itemPrice"
|
|
name="price"
|
|
required
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label
|
|
for="itemQty"
|
|
class="block text-sm font-medium text-gray-700 mb-1"
|
|
>Quantity</label
|
|
>
|
|
<input
|
|
type="number"
|
|
id="itemQty"
|
|
name="qty"
|
|
required
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
/>
|
|
</div>
|
|
<div class="flex items-end">
|
|
<button
|
|
type="submit"
|
|
class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition duration-200"
|
|
>
|
|
Add Item
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Loading State -->
|
|
<div id="loading" class="hidden">
|
|
<div class="flex justify-center items-center py-12">
|
|
<div
|
|
class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Error Message -->
|
|
<div
|
|
id="errorMessage"
|
|
class="hidden bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-6"
|
|
>
|
|
<span id="errorText"></span>
|
|
</div>
|
|
|
|
<!-- Success Message -->
|
|
<div
|
|
id="successMessage"
|
|
class="hidden bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-6"
|
|
>
|
|
<span id="successText"></span>
|
|
</div>
|
|
|
|
<!-- Inventory Items Grid -->
|
|
<div class="mb-6">
|
|
<h2 class="text-2xl font-semibold text-gray-800 mb-4">
|
|
Inventory Items
|
|
</h2>
|
|
<div
|
|
id="inventoryGrid"
|
|
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
|
|
>
|
|
<!-- Items will be populated here -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Empty State -->
|
|
<div id="emptyState" class="hidden text-center py-12">
|
|
<div class="text-gray-400 text-6xl mb-4">📦</div>
|
|
<h3 class="text-xl font-semibold text-gray-600 mb-2">
|
|
No items in inventory
|
|
</h3>
|
|
<p class="text-gray-500">Add your first item to get started!</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Edit Modal -->
|
|
<div
|
|
id="editModal"
|
|
class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50"
|
|
>
|
|
<div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6">
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-4">Edit Item</h3>
|
|
<form id="editItemForm">
|
|
<input type="hidden" id="editItemId" />
|
|
<div class="mb-4">
|
|
<label
|
|
for="editItemName"
|
|
class="block text-sm font-medium text-gray-700 mb-1"
|
|
>Item Name</label
|
|
>
|
|
<input
|
|
type="text"
|
|
id="editItemName"
|
|
name="name"
|
|
required
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
/>
|
|
</div>
|
|
<div class="mb-4">
|
|
<label
|
|
for="editItemPrice"
|
|
class="block text-sm font-medium text-gray-700 mb-1"
|
|
>Price ($)</label
|
|
>
|
|
<input
|
|
type="number"
|
|
id="editItemPrice"
|
|
name="price"
|
|
required
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
/>
|
|
</div>
|
|
<div class="mb-6">
|
|
<label
|
|
for="editItemQty"
|
|
class="block text-sm font-medium text-gray-700 mb-1"
|
|
>Quantity</label
|
|
>
|
|
<input
|
|
type="number"
|
|
id="editItemQty"
|
|
name="qty"
|
|
required
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
/>
|
|
</div>
|
|
<div class="flex space-x-3">
|
|
<button
|
|
type="button"
|
|
id="cancelEdit"
|
|
class="flex-1 bg-gray-300 text-gray-700 py-2 px-4 rounded-md hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition duration-200"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
class="flex-1 bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition duration-200"
|
|
>
|
|
Save Changes
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module" src="js/script.js"></script>
|
|
</body>
|
|
</html>
|