22412001/uas-web-22412001
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add dark mode and disable decimals

Browse Source
This commit is contained in:
Syahdan Hafiz Ashari 2025-07-15 14:29:56 +07:00
parent 193f1b8c0f
commit fc3a6fd54e
3 changed files with 79 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
client/css/style.css
View File

@ -32,33 +32,33 @@
/* Card hover effects */ /* Card hover effects */
.inventory-card { .inventory-card {
transition: all 0.3s ease; transition: all 0.3s ease;
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); background: linear-gradient(135deg, #0a0a0a 0%, #111111 100%);
border: 1px solid #e2e8f0; border: 1px solid #27272a;
} }
.inventory-card:hover { .inventory-card:hover {
transform: translateY(-5px); 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); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
border-color: #cbd5e1; border-color: #3f3f46;
} }
/* Stock level indicators */ /* Stock level indicators */
.stock-low { .stock-low {
background-color: #fef2f2; background-color: #450a0a;
color: #991b1b; color: #fca5a5;
border: 1px solid #fecaca; border: 1px solid #7f1d1d;
} }
.stock-medium { .stock-medium {
background-color: #fffbeb; background-color: #451a03;
color: #92400e; color: #fed7aa;
border: 1px solid #fed7aa; border: 1px solid #92400e;
} }
.stock-high { .stock-high {
background-color: #f0fdf4; background-color: #052e16;
color: #166534; color: #bbf7d0;
border: 1px solid #bbf7d0; border: 1px solid #166534;
} }
/* Button animations */ /* Button animations */
@ -171,15 +171,15 @@
} }
.alert-success { .alert-success {
background-color: #ecfdf5; background-color: #052e16;
border-color: #a7f3d0; border-color: #166534;
color: #047857; color: #bbf7d0;
} }
.alert-error { .alert-error {
background-color: #fef2f2; background-color: #450a0a;
border-color: #fecaca; border-color: #7f1d1d;
color: #dc2626; color: #fca5a5;
} }
/* Card content spacing */ /* Card content spacing */
@ -188,13 +188,13 @@
} }
.card-header { .card-header {
border-bottom: 1px solid #e5e7eb; border-bottom: 1px solid #374151;
padding-bottom: 0.75rem; padding-bottom: 0.75rem;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.card-footer { .card-footer {
border-top: 1px solid #e5e7eb; border-top: 1px solid #374151;
padding-top: 0.75rem; padding-top: 0.75rem;
margin-top: 1rem; margin-top: 1rem;
} }

68
client/index.html
View File

@ -8,25 +8,25 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/ky/0.33.3/index.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ky/0.33.3/index.min.js"></script>
<link rel="stylesheet" href="css/style.css" /> <link rel="stylesheet" href="css/style.css" />
</head> </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"> <div class="container mx-auto px-4 py-8">
<!-- Header --> <!-- Header -->
<div class="mb-8"> <div class="mb-8">
<h1 class="text-4xl font-bold text-gray-800 mb-2"> <h1 class="text-4xl font-bold text-white mb-2">Inventory Management</h1>
Inventory Management <p class="text-gray-400">Manage your inventory items efficiently</p>
</h1> <p class="text-gray-600">Created by Syahdan & Claude Sonnet 4</p>
<p class="text-gray-600">Manage your inventory items efficiently</p>
<p class="text-gray-300">Created by Syahdan & Claude Sonnet 4</p>
</div> </div>
<!-- Add New Item Form --> <!-- Add New Item Form -->
<div class="bg-white rounded-lg shadow-md p-6 mb-8"> <div
<h2 class="text-2xl font-semibold text-gray-800 mb-4">Add New Item</h2> 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"> <form id="addItemForm" class="grid grid-cols-1 md:grid-cols-4 gap-4">
<div> <div>
<label <label
for="itemName" 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 >Item Name</label
> >
<input <input
@ -34,27 +34,29 @@
id="itemName" id="itemName"
name="name" name="name"
required 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>
<div> <div>
<label <label
for="itemPrice" 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 >Price ($)</label
> >
<input <input
type="number" type="number"
id="itemPrice" id="itemPrice"
name="price" name="price"
step="1"
min="0"
required 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>
<div> <div>
<label <label
for="itemQty" 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 >Quantity</label
> >
<input <input
@ -62,13 +64,13 @@
id="itemQty" id="itemQty"
name="qty" name="qty"
required 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>
<div class="flex items-end"> <div class="flex items-end">
<button <button
type="submit" 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 Add Item
</button> </button>
@ -88,7 +90,7 @@
<!-- Error Message --> <!-- Error Message -->
<div <div
id="errorMessage" 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> <span id="errorText"></span>
</div> </div>
@ -96,16 +98,14 @@
<!-- Success Message --> <!-- Success Message -->
<div <div
id="successMessage" 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> <span id="successText"></span>
</div> </div>
<!-- Inventory Items Grid --> <!-- Inventory Items Grid -->
<div class="mb-6"> <div class="mb-6">
<h2 class="text-2xl font-semibold text-gray-800 mb-4"> <h2 class="text-2xl font-semibold text-white mb-4">Inventory Items</h2>
Inventory Items
</h2>
<div <div
id="inventoryGrid" id="inventoryGrid"
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6" 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 --> <!-- Empty State -->
<div id="emptyState" class="hidden text-center py-12"> <div id="emptyState" class="hidden text-center py-12">
<div class="text-gray-400 text-6xl mb-4">📦</div> <div class="text-gray-600 text-6xl mb-4">📦</div>
<h3 class="text-xl font-semibold text-gray-600 mb-2"> <h3 class="text-xl font-semibold text-gray-300 mb-2">
No items in inventory No items in inventory
</h3> </h3>
<p class="text-gray-500">Add your first item to get started!</p> <p class="text-gray-500">Add your first item to get started!</p>
@ -129,14 +129,16 @@
id="editModal" id="editModal"
class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50" 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"> <div
<h3 class="text-lg font-semibold text-gray-800 mb-4">Edit Item</h3> 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"> <form id="editItemForm">
<input type="hidden" id="editItemId" /> <input type="hidden" id="editItemId" />
<div class="mb-4"> <div class="mb-4">
<label <label
for="editItemName" 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 >Item Name</label
> >
<input <input
@ -144,27 +146,29 @@
id="editItemName" id="editItemName"
name="name" name="name"
required 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>
<div class="mb-4"> <div class="mb-4">
<label <label
for="editItemPrice" 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 >Price ($)</label
> >
<input <input
type="number" type="number"
id="editItemPrice" id="editItemPrice"
name="price" name="price"
step="1"
min="0"
required 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>
<div class="mb-6"> <div class="mb-6">
<label <label
for="editItemQty" 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 >Quantity</label
> >
<input <input
@ -172,20 +176,20 @@
id="editItemQty" id="editItemQty"
name="qty" name="qty"
required 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>
<div class="flex space-x-3"> <div class="flex space-x-3">
<button <button
type="button" type="button"
id="cancelEdit" 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 Cancel
</button> </button>
<button <button
type="submit" 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 Save Changes
</button> </button>

40
client/js/script.js
View File

@ -61,7 +61,7 @@ class InventoryManager {
const response = await this.client.get("read"); const response = await this.client.get("read");
const result = await response.json(); const result = await response.json();
if (result.status === "success") { if (result.status === "success") {
this.items = result; this.items = result;
this.renderItems(); this.renderItems();
@ -85,7 +85,7 @@ class InventoryManager {
const newItem = { const newItem = {
name: formData.get("name").trim(), name: formData.get("name").trim(),
price: parseFloat(formData.get("price")), price: parseInt(formData.get("price")),
qty: parseInt(formData.get("qty")), qty: parseInt(formData.get("qty")),
}; };
@ -104,7 +104,7 @@ class InventoryManager {
}); });
const result = await response.json(); const result = await response.json();
if (result.status === "success") { if (result.status === "success") {
// Add the new item with the ID returned from the API // Add the new item with the ID returned from the API
this.items.data.push(result.data); this.items.data.push(result.data);
@ -132,7 +132,7 @@ class InventoryManager {
const updatedItem = { const updatedItem = {
id: parseInt(id), id: parseInt(id),
name: formData.get("name").trim(), name: formData.get("name").trim(),
price: parseFloat(formData.get("price")), price: parseInt(formData.get("price")),
qty: parseInt(formData.get("qty")), qty: parseInt(formData.get("qty")),
}; };
@ -151,9 +151,11 @@ class InventoryManager {
}); });
const result = await response.json(); const result = await response.json();
if (result.status === "success") { 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) { if (index !== -1) {
this.items.data[index] = result.data; this.items.data[index] = result.data;
} }
@ -187,9 +189,11 @@ class InventoryManager {
}); });
const result = await response.json(); const result = await response.json();
if (result.status === "success") { 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.renderItems();
this.showSuccess(result.message || "Item deleted successfully!"); this.showSuccess(result.message || "Item deleted successfully!");
this.showLoading(false); this.showLoading(false);
@ -259,14 +263,14 @@ class InventoryManager {
<div class="inventory-card rounded-lg shadow-md overflow-hidden fade-in"> <div class="inventory-card rounded-lg shadow-md overflow-hidden fade-in">
<div class="card-content"> <div class="card-content">
<div class="card-header"> <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
}"> }">
${item.name} ${item.name}
</h3> </h3>
<div class="flex items-center justify-between mt-2"> <div class="flex items-center justify-between mt-2">
<span class="text-2xl font-bold text-green-600 price-display"> <span class="text-2xl font-bold text-green-400 price-display">
$${item.price.toFixed(2)} $${item.price}
</span> </span>
<span class="status-badge ${stockClass}"> <span class="status-badge ${stockClass}">
${stockLevel} ${stockLevel}
@ -276,16 +280,16 @@ class InventoryManager {
<div class="space-y-3"> <div class="space-y-3">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<span class="text-sm text-gray-600">Quantity:</span> <span class="text-sm text-gray-400">Quantity:</span>
<span class="text-lg font-semibold text-gray-800"> <span class="text-lg font-semibold text-gray-200">
${item.qty} units ${item.qty} units
</span> </span>
</div> </div>
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<span class="text-sm text-gray-600">Total Value:</span> <span class="text-sm text-gray-400">Total Value:</span>
<span class="text-lg font-semibold text-blue-600 price-display"> <span class="text-lg font-semibold text-blue-400 price-display">
$${(item.price * item.qty).toFixed(2)} $${item.price * item.qty}
</span> </span>
</div> </div>
</div> </div>
@ -293,11 +297,11 @@ class InventoryManager {
<div class="card-footer"> <div class="card-footer">
<div class="flex space-x-2"> <div class="flex space-x-2">
<button id="edit-${item.id}" <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> <span class="text-sm font-medium">Edit</span>
</button> </button>
<button id="delete-${item.id}" <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> <span class="text-sm font-medium">Delete</span>
</button> </button>
</div> </div>