client works
This commit is contained in:
parent
67a380aa54
commit
dcbc8a321e
200
client/css/style.css
Normal file
200
client/css/style.css
Normal file
@ -0,0 +1,200 @@
|
||||
/* Custom animations and styles */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
animation: fadeIn 0.5s ease-out;
|
||||
}
|
||||
|
||||
.slide-in {
|
||||
animation: slideIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
/* Card hover effects */
|
||||
.inventory-card {
|
||||
transition: all 0.3s ease;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/* Stock level indicators */
|
||||
.stock-low {
|
||||
background-color: #fef2f2;
|
||||
color: #991b1b;
|
||||
border: 1px solid #fecaca;
|
||||
}
|
||||
|
||||
.stock-medium {
|
||||
background-color: #fffbeb;
|
||||
color: #92400e;
|
||||
border: 1px solid #fed7aa;
|
||||
}
|
||||
|
||||
.stock-high {
|
||||
background-color: #f0fdf4;
|
||||
color: #166534;
|
||||
border: 1px solid #bbf7d0;
|
||||
}
|
||||
|
||||
/* Button animations */
|
||||
.btn-primary {
|
||||
transition: all 0.2s ease;
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
transition: all 0.2s ease;
|
||||
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* Form focus states */
|
||||
.form-input:focus {
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
/* Modal animations */
|
||||
.modal-overlay {
|
||||
backdrop-filter: blur(4px);
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
/* Loading spinner */
|
||||
.loading-spinner {
|
||||
border-top-color: #3b82f6;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Price formatting */
|
||||
.price-display {
|
||||
font-feature-settings: 'tnum';
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
/* Responsive design improvements */
|
||||
@media (max-width: 768px) {
|
||||
.inventory-card {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* Status badges */
|
||||
.status-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
|
||||
/* Quantity controls */
|
||||
.qty-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.qty-btn {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.qty-btn:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* Success and error messages */
|
||||
.alert {
|
||||
border-radius: 0.5rem;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
background-color: #ecfdf5;
|
||||
border-color: #a7f3d0;
|
||||
color: #047857;
|
||||
}
|
||||
|
||||
.alert-error {
|
||||
background-color: #fef2f2;
|
||||
border-color: #fecaca;
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
/* Card content spacing */
|
||||
.card-content {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
padding-bottom: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
border-top: 1px solid #e5e7eb;
|
||||
padding-top: 0.75rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
@ -1,31 +1,199 @@
|
||||
<html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Widuri Client</title>
|
||||
<link rel="stylesheet" href="//cdn.datatables.net/2.3.2/css/dataTables.dataTables.min.css">
|
||||
<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>
|
||||
<input id="form-add-name" type="text" placeholder="Name" />
|
||||
<input id="form-add-phone" type="text" placeholder="Phone" />
|
||||
<button type="button" onclick="buttonAdd()">Create</button>
|
||||
<hr>
|
||||
<table id="table-list">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Name</th>
|
||||
<th>Phone</th>
|
||||
<th>Act</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<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>
|
||||
|
||||
<tbody></tbody>
|
||||
|
||||
</table>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
|
||||
<script src="//cdn.datatables.net/2.3.2/js/dataTables.min.js"></script>
|
||||
<script src="js/carrack.js"></script>
|
||||
<script src="js/data.js"></script>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
371
client/js/script.js
Normal file
371
client/js/script.js
Normal file
@ -0,0 +1,371 @@
|
||||
// Inventory Management System
|
||||
import ky from "https://cdn.jsdelivr.net/npm/ky@1.8.1/+esm";
|
||||
|
||||
class InventoryManager {
|
||||
constructor() {
|
||||
this.baseUrl = "http://localhost:11000/api"; // Replace with your Bruno API endpoint
|
||||
this.client = ky.extend({
|
||||
prefixUrl: this.baseUrl,
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
timeout: 10000,
|
||||
retry: 2,
|
||||
});
|
||||
|
||||
this.items = [];
|
||||
this.init();
|
||||
}
|
||||
|
||||
async init() {
|
||||
this.bindEvents();
|
||||
await this.loadItems();
|
||||
}
|
||||
|
||||
bindEvents() {
|
||||
// Add item form
|
||||
document.getElementById("addItemForm").addEventListener("submit", (e) => {
|
||||
e.preventDefault();
|
||||
this.addItem();
|
||||
});
|
||||
|
||||
// Edit modal events
|
||||
document.getElementById("editItemForm").addEventListener("submit", (e) => {
|
||||
e.preventDefault();
|
||||
this.updateItem();
|
||||
});
|
||||
|
||||
document.getElementById("cancelEdit").addEventListener("click", () => {
|
||||
this.closeEditModal();
|
||||
});
|
||||
|
||||
// Close modal when clicking outside
|
||||
document.getElementById("editModal").addEventListener("click", (e) => {
|
||||
if (e.target.id === "editModal") {
|
||||
this.closeEditModal();
|
||||
}
|
||||
});
|
||||
|
||||
// Close modal on escape key
|
||||
document.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Escape") {
|
||||
this.closeEditModal();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async loadItems() {
|
||||
try {
|
||||
this.showLoading(true);
|
||||
this.hideMessages();
|
||||
|
||||
const response = await this.client.get("read");
|
||||
const result = await response.json();
|
||||
|
||||
if (result.status === "success") {
|
||||
this.items = result;
|
||||
this.renderItems();
|
||||
this.showLoading(false);
|
||||
} else {
|
||||
this.showLoading(false);
|
||||
this.showError(result.message || "Failed to load items");
|
||||
}
|
||||
} catch (error) {
|
||||
this.showLoading(false);
|
||||
this.showError(
|
||||
"Failed to load inventory items. Please check your connection."
|
||||
);
|
||||
console.error("Error loading items:", error);
|
||||
}
|
||||
}
|
||||
|
||||
async addItem() {
|
||||
const form = document.getElementById("addItemForm");
|
||||
const formData = new FormData(form);
|
||||
|
||||
const newItem = {
|
||||
name: formData.get("name").trim(),
|
||||
price: parseFloat(formData.get("price")),
|
||||
qty: parseInt(formData.get("qty")),
|
||||
};
|
||||
|
||||
// Validation
|
||||
if (!newItem.name || newItem.price < 0 || newItem.qty < 0) {
|
||||
this.showError("Please fill in all fields with valid values.");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
this.showLoading(true);
|
||||
this.hideMessages();
|
||||
|
||||
const response = await this.client.post("create", {
|
||||
json: newItem,
|
||||
});
|
||||
|
||||
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);
|
||||
|
||||
this.renderItems();
|
||||
form.reset();
|
||||
this.showSuccess(result.message || "Item added successfully!");
|
||||
this.showLoading(false);
|
||||
} else {
|
||||
this.showLoading(false);
|
||||
this.showError(result.message || "Failed to add item");
|
||||
}
|
||||
} catch (error) {
|
||||
this.showLoading(false);
|
||||
this.showError("Failed to add item. Please try again.");
|
||||
console.error("Error adding item:", error);
|
||||
}
|
||||
}
|
||||
|
||||
async updateItem() {
|
||||
const id = document.getElementById("editItemId").value;
|
||||
const form = document.getElementById("editItemForm");
|
||||
const formData = new FormData(form);
|
||||
|
||||
const updatedItem = {
|
||||
id: parseInt(id),
|
||||
name: formData.get("name").trim(),
|
||||
price: parseFloat(formData.get("price")),
|
||||
qty: parseInt(formData.get("qty")),
|
||||
};
|
||||
|
||||
// Validation
|
||||
if (!updatedItem.name || updatedItem.price < 0 || updatedItem.qty < 0) {
|
||||
this.showError("Please fill in all fields with valid values.");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
this.showLoading(true);
|
||||
this.hideMessages();
|
||||
|
||||
const response = await this.client.put(`update`, {
|
||||
json: updatedItem,
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.status === "success") {
|
||||
const index = this.items.data.findIndex((item) => item.id === parseInt(id));
|
||||
if (index !== -1) {
|
||||
this.items.data[index] = result.data;
|
||||
}
|
||||
|
||||
this.renderItems();
|
||||
this.closeEditModal();
|
||||
this.showSuccess(result.message || "Item updated successfully!");
|
||||
this.showLoading(false);
|
||||
} else {
|
||||
this.showLoading(false);
|
||||
this.showError(result.message || "Failed to update item");
|
||||
}
|
||||
} catch (error) {
|
||||
this.showLoading(false);
|
||||
this.showError("Failed to update item. Please try again.");
|
||||
console.error("Error updating item:", error);
|
||||
}
|
||||
}
|
||||
|
||||
async deleteItem(id) {
|
||||
if (!confirm("Are you sure you want to delete this item?")) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
this.showLoading(true);
|
||||
this.hideMessages();
|
||||
|
||||
const response = await this.client.delete(`delete`, {
|
||||
json: { id: parseInt(id) },
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.status === "success") {
|
||||
this.items.data = this.items.data.filter((item) => item.id !== parseInt(id));
|
||||
this.renderItems();
|
||||
this.showSuccess(result.message || "Item deleted successfully!");
|
||||
this.showLoading(false);
|
||||
} else {
|
||||
this.showLoading(false);
|
||||
this.showError(result.message || "Failed to delete item");
|
||||
}
|
||||
} catch (error) {
|
||||
this.showLoading(false);
|
||||
this.showError("Failed to delete item. Please try again.");
|
||||
console.error("Error deleting item:", error);
|
||||
}
|
||||
}
|
||||
|
||||
openEditModal(item) {
|
||||
document.getElementById("editItemId").value = item.id;
|
||||
document.getElementById("editItemName").value = item.name;
|
||||
document.getElementById("editItemPrice").value = item.price;
|
||||
document.getElementById("editItemQty").value = item.qty;
|
||||
|
||||
document.getElementById("editModal").classList.remove("hidden");
|
||||
document.getElementById("editItemName").focus();
|
||||
}
|
||||
|
||||
closeEditModal() {
|
||||
document.getElementById("editModal").classList.add("hidden");
|
||||
document.getElementById("editItemForm").reset();
|
||||
}
|
||||
|
||||
renderItems() {
|
||||
const grid = document.getElementById("inventoryGrid");
|
||||
const emptyState = document.getElementById("emptyState");
|
||||
|
||||
if (!this.items.data || this.items.data.length === 0) {
|
||||
grid.innerHTML = "";
|
||||
emptyState.classList.remove("hidden");
|
||||
return;
|
||||
}
|
||||
|
||||
emptyState.classList.add("hidden");
|
||||
|
||||
const itemsHTML = this.items.data
|
||||
.map((item) => this.createItemCard(item))
|
||||
.join("");
|
||||
grid.innerHTML = itemsHTML;
|
||||
|
||||
// Add event listeners for buttons
|
||||
this.items.data.forEach((item) => {
|
||||
const editBtn = document.getElementById(`edit-${item.id}`);
|
||||
const deleteBtn = document.getElementById(`delete-${item.id}`);
|
||||
|
||||
if (editBtn) {
|
||||
editBtn.addEventListener("click", () => this.openEditModal(item));
|
||||
}
|
||||
|
||||
if (deleteBtn) {
|
||||
deleteBtn.addEventListener("click", () => this.deleteItem(item.id));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
createItemCard(item) {
|
||||
const stockLevel = this.getStockLevel(item.qty);
|
||||
const stockClass = this.getStockClass(stockLevel);
|
||||
|
||||
return `
|
||||
<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="${
|
||||
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>
|
||||
<span class="status-badge ${stockClass}">
|
||||
${stockLevel}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
${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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<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">
|
||||
<span class="text-sm font-medium">Delete</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
getStockLevel(qty) {
|
||||
if (qty <= 5) return "Low Stock";
|
||||
if (qty <= 20) return "Medium Stock";
|
||||
return "High Stock";
|
||||
}
|
||||
|
||||
getStockClass(stockLevel) {
|
||||
switch (stockLevel) {
|
||||
case "Low Stock":
|
||||
return "stock-low";
|
||||
case "Medium Stock":
|
||||
return "stock-medium";
|
||||
case "High Stock":
|
||||
return "stock-high";
|
||||
default:
|
||||
return "stock-medium";
|
||||
}
|
||||
}
|
||||
|
||||
showLoading(show) {
|
||||
const loading = document.getElementById("loading");
|
||||
if (show) {
|
||||
loading.classList.remove("hidden");
|
||||
} else {
|
||||
loading.classList.add("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
showError(message) {
|
||||
const errorDiv = document.getElementById("errorMessage");
|
||||
const errorText = document.getElementById("errorText");
|
||||
|
||||
errorText.textContent = message;
|
||||
errorDiv.classList.remove("hidden");
|
||||
|
||||
setTimeout(() => {
|
||||
errorDiv.classList.add("hidden");
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
showSuccess(message) {
|
||||
const successDiv = document.getElementById("successMessage");
|
||||
const successText = document.getElementById("successText");
|
||||
|
||||
successText.textContent = message;
|
||||
successDiv.classList.remove("hidden");
|
||||
|
||||
setTimeout(() => {
|
||||
successDiv.classList.add("hidden");
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
hideMessages() {
|
||||
document.getElementById("errorMessage").classList.add("hidden");
|
||||
document.getElementById("successMessage").classList.add("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize the app when DOM is loaded
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
new InventoryManager();
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user