add dark mode and disable decimals
This commit is contained in:
parent
193f1b8c0f
commit
fc3a6fd54e
@ -32,33 +32,33 @@
|
||||
/* Card hover effects */
|
||||
.inventory-card {
|
||||
transition: all 0.3s ease;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
|
||||
border: 1px solid #e2e8f0;
|
||||
background: linear-gradient(135deg, #0a0a0a 0%, #111111 100%);
|
||||
border: 1px solid #27272a;
|
||||
}
|
||||
|
||||
.inventory-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
border-color: #cbd5e1;
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
|
||||
border-color: #3f3f46;
|
||||
}
|
||||
|
||||
/* Stock level indicators */
|
||||
.stock-low {
|
||||
background-color: #fef2f2;
|
||||
color: #991b1b;
|
||||
border: 1px solid #fecaca;
|
||||
background-color: #450a0a;
|
||||
color: #fca5a5;
|
||||
border: 1px solid #7f1d1d;
|
||||
}
|
||||
|
||||
.stock-medium {
|
||||
background-color: #fffbeb;
|
||||
color: #92400e;
|
||||
border: 1px solid #fed7aa;
|
||||
background-color: #451a03;
|
||||
color: #fed7aa;
|
||||
border: 1px solid #92400e;
|
||||
}
|
||||
|
||||
.stock-high {
|
||||
background-color: #f0fdf4;
|
||||
color: #166534;
|
||||
border: 1px solid #bbf7d0;
|
||||
background-color: #052e16;
|
||||
color: #bbf7d0;
|
||||
border: 1px solid #166534;
|
||||
}
|
||||
|
||||
/* Button animations */
|
||||
@ -171,15 +171,15 @@
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
background-color: #ecfdf5;
|
||||
border-color: #a7f3d0;
|
||||
color: #047857;
|
||||
background-color: #052e16;
|
||||
border-color: #166534;
|
||||
color: #bbf7d0;
|
||||
}
|
||||
|
||||
.alert-error {
|
||||
background-color: #fef2f2;
|
||||
border-color: #fecaca;
|
||||
color: #dc2626;
|
||||
background-color: #450a0a;
|
||||
border-color: #7f1d1d;
|
||||
color: #fca5a5;
|
||||
}
|
||||
|
||||
/* Card content spacing */
|
||||
@ -188,13 +188,13 @@
|
||||
}
|
||||
|
||||
.card-header {
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
border-bottom: 1px solid #374151;
|
||||
padding-bottom: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
border-top: 1px solid #e5e7eb;
|
||||
border-top: 1px solid #374151;
|
||||
padding-top: 0.75rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
@ -8,25 +8,25 @@
|
||||
<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">
|
||||
<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-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>
|
||||
<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-white rounded-lg shadow-md p-6 mb-8">
|
||||
<h2 class="text-2xl font-semibold text-gray-800 mb-4">Add New Item</h2>
|
||||
<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-700 mb-1"
|
||||
class="block text-sm font-medium text-gray-300 mb-1"
|
||||
>Item Name</label
|
||||
>
|
||||
<input
|
||||
@ -34,27 +34,29 @@
|
||||
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"
|
||||
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-700 mb-1"
|
||||
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 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
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-700 mb-1"
|
||||
class="block text-sm font-medium text-gray-300 mb-1"
|
||||
>Quantity</label
|
||||
>
|
||||
<input
|
||||
@ -62,13 +64,13 @@
|
||||
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"
|
||||
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 transition duration-200"
|
||||
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>
|
||||
@ -88,7 +90,7 @@
|
||||
<!-- Error Message -->
|
||||
<div
|
||||
id="errorMessage"
|
||||
class="hidden bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-6"
|
||||
class="hidden bg-red-950 border border-red-800 text-red-300 px-4 py-3 rounded mb-6"
|
||||
>
|
||||
<span id="errorText"></span>
|
||||
</div>
|
||||
@ -96,16 +98,14 @@
|
||||
<!-- Success Message -->
|
||||
<div
|
||||
id="successMessage"
|
||||
class="hidden bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-6"
|
||||
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-gray-800 mb-4">
|
||||
Inventory Items
|
||||
</h2>
|
||||
<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"
|
||||
@ -116,8 +116,8 @@
|
||||
|
||||
<!-- 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">
|
||||
<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>
|
||||
@ -129,14 +129,16 @@
|
||||
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>
|
||||
<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-700 mb-1"
|
||||
class="block text-sm font-medium text-gray-300 mb-1"
|
||||
>Item Name</label
|
||||
>
|
||||
<input
|
||||
@ -144,27 +146,29 @@
|
||||
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"
|
||||
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-700 mb-1"
|
||||
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 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
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-700 mb-1"
|
||||
class="block text-sm font-medium text-gray-300 mb-1"
|
||||
>Quantity</label
|
||||
>
|
||||
<input
|
||||
@ -172,20 +176,20 @@
|
||||
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"
|
||||
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-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"
|
||||
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 transition duration-200"
|
||||
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>
|
||||
|
||||
@ -61,7 +61,7 @@ class InventoryManager {
|
||||
|
||||
const response = await this.client.get("read");
|
||||
const result = await response.json();
|
||||
|
||||
|
||||
if (result.status === "success") {
|
||||
this.items = result;
|
||||
this.renderItems();
|
||||
@ -85,7 +85,7 @@ class InventoryManager {
|
||||
|
||||
const newItem = {
|
||||
name: formData.get("name").trim(),
|
||||
price: parseFloat(formData.get("price")),
|
||||
price: parseInt(formData.get("price")),
|
||||
qty: parseInt(formData.get("qty")),
|
||||
};
|
||||
|
||||
@ -104,7 +104,7 @@ class InventoryManager {
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
|
||||
if (result.status === "success") {
|
||||
// Add the new item with the ID returned from the API
|
||||
this.items.data.push(result.data);
|
||||
@ -132,7 +132,7 @@ class InventoryManager {
|
||||
const updatedItem = {
|
||||
id: parseInt(id),
|
||||
name: formData.get("name").trim(),
|
||||
price: parseFloat(formData.get("price")),
|
||||
price: parseInt(formData.get("price")),
|
||||
qty: parseInt(formData.get("qty")),
|
||||
};
|
||||
|
||||
@ -151,9 +151,11 @@ class InventoryManager {
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
|
||||
if (result.status === "success") {
|
||||
const index = this.items.data.findIndex((item) => item.id === parseInt(id));
|
||||
const index = this.items.data.findIndex(
|
||||
(item) => item.id === parseInt(id)
|
||||
);
|
||||
if (index !== -1) {
|
||||
this.items.data[index] = result.data;
|
||||
}
|
||||
@ -187,9 +189,11 @@ class InventoryManager {
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
|
||||
if (result.status === "success") {
|
||||
this.items.data = this.items.data.filter((item) => item.id !== parseInt(id));
|
||||
this.items.data = this.items.data.filter(
|
||||
(item) => item.id !== parseInt(id)
|
||||
);
|
||||
this.renderItems();
|
||||
this.showSuccess(result.message || "Item deleted successfully!");
|
||||
this.showLoading(false);
|
||||
@ -259,14 +263,14 @@ class InventoryManager {
|
||||
<div class="inventory-card rounded-lg shadow-md overflow-hidden fade-in">
|
||||
<div class="card-content">
|
||||
<div class="card-header">
|
||||
<h3 class="text-lg font-semibold text-gray-800 truncate" title="${
|
||||
<h3 class="text-lg font-semibold text-white truncate" title="${
|
||||
item.name
|
||||
}">
|
||||
${item.name}
|
||||
</h3>
|
||||
<div class="flex items-center justify-between mt-2">
|
||||
<span class="text-2xl font-bold text-green-600 price-display">
|
||||
$${item.price.toFixed(2)}
|
||||
<span class="text-2xl font-bold text-green-400 price-display">
|
||||
$${item.price}
|
||||
</span>
|
||||
<span class="status-badge ${stockClass}">
|
||||
${stockLevel}
|
||||
@ -276,16 +280,16 @@ class InventoryManager {
|
||||
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm text-gray-600">Quantity:</span>
|
||||
<span class="text-lg font-semibold text-gray-800">
|
||||
<span class="text-sm text-gray-400">Quantity:</span>
|
||||
<span class="text-lg font-semibold text-gray-200">
|
||||
${item.qty} units
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm text-gray-600">Total Value:</span>
|
||||
<span class="text-lg font-semibold text-blue-600 price-display">
|
||||
$${(item.price * item.qty).toFixed(2)}
|
||||
<span class="text-sm text-gray-400">Total Value:</span>
|
||||
<span class="text-lg font-semibold text-blue-400 price-display">
|
||||
$${item.price * item.qty}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -293,11 +297,11 @@ class InventoryManager {
|
||||
<div class="card-footer">
|
||||
<div class="flex space-x-2">
|
||||
<button id="edit-${item.id}"
|
||||
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 btn-primary">
|
||||
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-black transition duration-200 btn-primary">
|
||||
<span class="text-sm font-medium">Edit</span>
|
||||
</button>
|
||||
<button id="delete-${item.id}"
|
||||
class="flex-1 bg-red-600 text-white py-2 px-4 rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition duration-200 btn-danger">
|
||||
class="flex-1 bg-red-600 text-white py-2 px-4 rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-black transition duration-200 btn-danger">
|
||||
<span class="text-sm font-medium">Delete</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user