<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inventory</title>
<script
src="[Link]
</head>
<body>
<h1>Inventory Management</h1>
<div id="status">Connecting to Firebase...</div>
<table id="inventoryTable">
<thead>
<tr>
<th>Date</th>
<th>Item Code</th>
<th>Name</th>
<th>Category</th>
<th>Quantity</th>
<th>Cost Price</th>
<th>Selling Price</th>
<th>Consumer Price</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="tableBody">
<!-- Data will be dynamically inserted here -->
</tbody>
</table>
<!-- Form to Add/Edit Item -->
<form id="addItemForm">
<h2 id="formTitle">Add New Item</h2>
<input type="text" id="itemCode" placeholder="Item Code" required><br>
<input type="text" id="itemName" placeholder="Name" required><br>
<input type="text" id="itemCategory" placeholder="Category" required><br>
<input type="number" id="itemQuantity" placeholder="Quantity" required><br>
<input type="number" id="itemCostPrice" placeholder="Cost Price"
required><br>
<input type="number" id="itemSellerPrice" placeholder="Selling Price"
required><br>
<input type="number" id="itemConsumerPrice" placeholder="Consumer Price"
required><br>
<input type="date" id="itemDate" placeholder="Date" required><br> <!--
Added date field -->
<button type="submit" id="submitButton">Add Item</button>
<button type="button" id="clearButton" style="display:none;">Clear</button>
</form>
<button id="downloadButton">Download Inventory as Excel</button>
<input type="file" id="uploadFile" accept=".xlsx">
<button id="uploadButton">Upload Inventory</button>
<script type="module">
import { initializeApp } from
"[Link]
import { getDatabase, ref, onValue, set, remove, get, update } from
"[Link]
const firebaseConfig = {
apiKey: "AIzaSyC3JRUCohz7pZZ2kZ1vSItq6vjalorZTa0",
authDomain: "[Link]",
databaseURL: "[Link]
[Link]",
projectId: "systemstore-e0c45",
storageBucket: "[Link]",
messagingSenderId: "252593844424",
appId: "1:252593844424:web:2a8385f44b48dff586f5fd",
measurementId: "G-QS8881KHKK"
};
const app = initializeApp(firebaseConfig);
const database = getDatabase(app);
const productsRef = ref(database, 'products');
const statusElement = [Link]('status');
const tableBody = [Link]('tableBody');
const downloadButton = [Link]('downloadButton');
const uploadButton = [Link]('uploadButton');
const uploadFileInput = [Link]('uploadFile');
let editMode = false;
let currentItemCode = null;
// Function to save or edit an item
function saveItem(itemCode, name, category, quantity, costPrice,
sellerPrice, consumerPrice, date) {
const itemRef = ref(database, 'products/' + itemCode);
set(itemRef, {
name: name,
category: category,
quantity: quantity,
costPrice: costPrice,
sellerPrice: sellerPrice,
consumerPrice: consumerPrice,
date: date // Include date
}).then(() => {
alert(editMode ? "Item updated successfully!" : "Item added
successfully!");
resetForm();
}).catch((error) => {
alert("Failed to save item: " + [Link]);
});
}
// Function to delete an item
function deleteItem(itemCode) {
const confirmDelete = confirm("Are you sure you want to delete this
item?");
if (confirmDelete) {
const itemRef = ref(database, 'products/' + itemCode);
remove(itemRef).then(() => {
alert("Item deleted successfully!");
}).catch((error) => {
alert("Failed to delete item: " + [Link]);
});
} else {
alert("Item deletion canceled.");
}
}
// Function to populate the form with item data for editing
function editItem(itemCode, product) {
[Link]('itemCode').value = itemCode;
[Link]('itemName').value = [Link];
[Link]('itemCategory').value = [Link];
[Link]('itemQuantity').value = [Link];
[Link]('itemCostPrice').value = [Link];
[Link]('itemSellerPrice').value = [Link];
[Link]('itemConsumerPrice').value =
[Link];
[Link]('itemDate').value = [Link] || ''; //
Populate date field
[Link]('formTitle').textContent = "Edit Item";
[Link]('submitButton').textContent = "Save Changes";
[Link]('clearButton').[Link] = "inline-block";
editMode = true;
currentItemCode = itemCode;
}
// Function to reset the form to default state
function resetForm() {
[Link]('addItemForm').reset();
[Link]('formTitle').textContent = "Add New Item";
[Link]('submitButton').textContent = "Add Item";
[Link]('clearButton').[Link] = "none";
editMode = false;
currentItemCode = null;
}
// Function to display items in the table
function displayItems(products) {
[Link] = ''; // Clear the table before inserting new data
[Link]((product) => {
const itemCode = [Link];
const productData = [Link]();
const row = [Link]('tr');
const dateCell = [Link]('td');
[Link] = [Link] || '';
[Link](dateCell);
const codeCell = [Link]('td');
[Link] = itemCode;
[Link](codeCell);
const nameCell = [Link]('td');
[Link] = [Link];
[Link](nameCell);
const categoryCell = [Link]('td');
[Link] = [Link];
[Link](categoryCell);
const quantityCell = [Link]('td');
[Link] = [Link];
[Link](quantityCell);
const costPriceCell = [Link]('td');
[Link] = [Link];
[Link](costPriceCell);
const sellerPriceCell = [Link]('td');
[Link] = [Link];
[Link](sellerPriceCell);
const consumerPriceCell = [Link]('td');
[Link] = [Link];
[Link](consumerPriceCell);
// Create action buttons
const actionCell = [Link]('td');
const editButton = [Link]('button');
[Link] = "Edit";
[Link] = () => editItem(itemCode, productData);
[Link](editButton);
const deleteButton = [Link]('button');
[Link] = "Delete";
[Link] = () => deleteItem(itemCode);
[Link](deleteButton);
[Link](actionCell);
[Link](row); // Add the row to the table body
});
}
// Function to download data as an Excel file
function downloadExcel(data) {
const ws = [Link].json_to_sheet(data);
const wb = [Link].book_new();
[Link].book_append_sheet(wb, ws, "Inventory");
const wbout = [Link](wb, { bookType: 'xlsx', type: 'array' });
const blob = new Blob([wbout], { type: "application/octet-stream" });
const url = [Link](blob);
const a = [Link]('a');
[Link] = url;
[Link] = '[Link]';
[Link](a);
[Link]();
[Link](a);
}
// Function to upload data from an Excel file
function uploadExcel(file) {
const reader = new FileReader();
[Link] = (e) => {
const data = new Uint8Array([Link]);
const workbook = [Link](data, { type: 'array' });
const sheetName = [Link][0];
const sheet = [Link][sheetName];
const jsonData = [Link].sheet_to_json(sheet);
[Link]((item) => {
const itemCode = item['Item Code'];
if (itemCode) {
const itemRef = ref(database, 'products/' + itemCode);
set(itemRef, item).catch((error) => {
alert("Failed to upload item: " + [Link]);
});
}
});
alert("Inventory uploaded successfully!");
};
[Link](file);
}
// Event listener for form submission
[Link]('addItemForm').addEventListener('submit', (e) => {
[Link]();
const itemCode = [Link]('itemCode').value;
const name = [Link]('itemName').value;
const category = [Link]('itemCategory').value;
const quantity = [Link]('itemQuantity').value;
const costPrice = [Link]('itemCostPrice').value;
const sellerPrice = [Link]('itemSellerPrice').value;
const consumerPrice =
[Link]('itemConsumerPrice').value;
const date = [Link]('itemDate').value; // Get date
value
saveItem(itemCode, name, category, quantity, costPrice, sellerPrice,
consumerPrice, date);
});
// Event listener for clear button
[Link]('clearButton').addEventListener('click', (e) => {
resetForm();
});
// Event listener for download button
[Link]('click', () => {
get(productsRef).then((snapshot) => {
const data = [];
[Link]((product) => {
const productData = [Link]();
[Link]({
'Date': [Link],
'Item Code': [Link],
'Name': [Link],
'Category': [Link],
'Quantity': [Link],
'Cost Price': [Link],
'Selling Price': [Link],
'Consumer Price': [Link]
});
});
downloadExcel(data);
}).catch((error) => {
alert("Failed to download data: " + [Link]);
});
});
// Event listener for upload button
[Link]('click', () => {
const file = [Link][0];
if (file) {
uploadExcel(file);
} else {
alert("Please select a file to upload.");
}
});
// Fetch and display data from Firebase
onValue(productsRef, (snapshot) => {
const products = [];
[Link]((product) => {
[Link](product);
});
displayItems(products);
[Link] = 'Connected to Firebase';
[Link] = 'connected';
}, (error) => {
[Link] = 'Disconnected from Firebase';
[Link] = 'disconnected';
});
</script>
</body>
</html>