204 lines
7.3 KiB
HTML
204 lines
7.3 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-transparent min-h-screen text-white">
|
|
<div class="container mx-auto px-4 py-8">
|
|
<!-- Header -->
|
|
<div class="mb-8">
|
|
<h1 class="text-4xl font-bold text-white mb-2">Inventory Management</h1>
|
|
<p class="text-gray-400">Manage your inventory items efficiently</p>
|
|
<p class="text-gray-600">Created by Syahdan & Claude Sonnet 4</p>
|
|
</div>
|
|
|
|
<!-- Add New Item Form -->
|
|
<div
|
|
class="bg-gray-950 border border-gray-800 rounded-lg shadow-md p-6 mb-8"
|
|
>
|
|
<h2 class="text-2xl font-semibold text-white 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-300 mb-1"
|
|
>Item Name</label
|
|
>
|
|
<input
|
|
type="text"
|
|
id="itemName"
|
|
name="name"
|
|
required
|
|
class="w-full px-3 py-2 bg-gray-900 border border-gray-700 rounded-md text-white placeholder-gray-500 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-300 mb-1"
|
|
>Price ($)</label
|
|
>
|
|
<input
|
|
type="number"
|
|
id="itemPrice"
|
|
name="price"
|
|
step="1"
|
|
min="0"
|
|
required
|
|
class="w-full px-3 py-2 bg-gray-900 border border-gray-700 rounded-md text-white placeholder-gray-500 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-300 mb-1"
|
|
>Quantity</label
|
|
>
|
|
<input
|
|
type="number"
|
|
id="itemQty"
|
|
name="qty"
|
|
required
|
|
class="w-full px-3 py-2 bg-gray-900 border border-gray-700 rounded-md text-white placeholder-gray-500 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 focus:ring-offset-gray-950 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-950 border border-red-800 text-red-300 px-4 py-3 rounded mb-6"
|
|
>
|
|
<span id="errorText"></span>
|
|
</div>
|
|
|
|
<!-- Success Message -->
|
|
<div
|
|
id="successMessage"
|
|
class="hidden bg-green-950 border border-green-800 text-green-300 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-white 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-600 text-6xl mb-4">📦</div>
|
|
<h3 class="text-xl font-semibold text-gray-300 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-gray-950 border border-gray-800 rounded-lg shadow-xl max-w-md w-full p-6"
|
|
>
|
|
<h3 class="text-lg font-semibold text-white 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-300 mb-1"
|
|
>Item Name</label
|
|
>
|
|
<input
|
|
type="text"
|
|
id="editItemName"
|
|
name="name"
|
|
required
|
|
class="w-full px-3 py-2 bg-gray-900 border border-gray-700 rounded-md text-white placeholder-gray-500 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-300 mb-1"
|
|
>Price ($)</label
|
|
>
|
|
<input
|
|
type="number"
|
|
id="editItemPrice"
|
|
name="price"
|
|
step="1"
|
|
min="0"
|
|
required
|
|
class="w-full px-3 py-2 bg-gray-900 border border-gray-700 rounded-md text-white placeholder-gray-500 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-300 mb-1"
|
|
>Quantity</label
|
|
>
|
|
<input
|
|
type="number"
|
|
id="editItemQty"
|
|
name="qty"
|
|
required
|
|
class="w-full px-3 py-2 bg-gray-900 border border-gray-700 rounded-md text-white placeholder-gray-500 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-800 text-gray-300 py-2 px-4 rounded-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-600 focus:ring-offset-2 focus:ring-offset-gray-950 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 focus:ring-offset-gray-950 transition duration-200"
|
|
>
|
|
Save Changes
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module" src="js/script.js"></script>
|
|
</body>
|
|
</html>
|