Sari-Sari Store Inventory System

Sari-Sari Store

Dashboard

Top Selling Products

Product 1
Product 2
Product 3

Latest Sales

Sale 1
Sale 2
Sale 3

Inventory Status

Items running low: 5

Total items in stock: 100

Inventory Management

Add Product

View Inventory

Categories

Sales Management

Record Sale

View Sales

Utang Tracker

Reports

Daily Sales Report

Weekly Sales Report

Monthly Sales Report

User Management

Manage Users

User Groups

Employee Panel

Admin Panel

Special User Panel

Settings

Account Settings

System Settings

/* General Styles */ body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; color: #333; display: flex; flex-direction: column; min-height: 100vh; } header { background-color: #333; color: #fff; padding: 1em 20px; display: flex; justify-content: space-between; align-items: center; flex-direction: column; /* Stack elements vertically in header */ } header h1 { margin: 0; text-align: center; /* Center the title */ } /* Navigation Bar Styling */ header nav { width: 100%; /* Full width navigation */ background-color: #444; /* Slightly darker background for nav */ padding: 0.5em 0; display: flex; justify-content: center; /* Center nav links horizontally */ } header nav ul { list-style: none; padding: 0; display: flex; /* Make nav links horizontal */ gap: 20px; /* Space between nav links */ } header nav ul li { margin: 0; /* Remove vertical margins */ } header nav a { display: flex; /* Use flex to center icon */ justify-content: center; /* Center icon horizontally */ align-items: center; /* Center icon vertically */ padding: 10px; text-decoration: none; color: #eee; /* Light text color for nav links */ background-color: transparent; /* No background for nav links */ border-radius: 5px; transition: background-color 0.3s ease; width: 40px; /* Fixed width for icon buttons */ height: 40px; /* Fixed height for icon buttons */ } header nav a:hover { background-color: #555; /* Darker hover background */ } header nav a .icon { font-size: 1.5em; /* Adjust icon size */ } footer { background-color: #333; color: #fff; text-align: center; padding: 1em 0; } main { display: flex; padding: 20px; flex: 1; flex-direction: column; /* Stack panels vertically */ } .panel { padding: 20px; } .panel:not(.active) { display: none; } .card-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; } .card { background-color: #fff; border-radius: 5px; padding: 20px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .card-header h3 { margin: 0; } .card-content { padding: 10px 0; } .card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } .card h3 { margin-top: 0; } /* Edit Button */ .edit-btn { padding: 8px 12px; border: none; border-radius: 5px; background-color: #007bff; color: #fff; cursor: pointer; font-size: 0.9em; transition: background-color 0.3s ease; } .edit-btn:hover { background-color: #0056b3; } /* Save and Cancel Buttons (initially hidden) */ .save-cancel-btns { margin-top: 10px; display: none; /* Initially hidden */ } .save-cancel-btns button { padding: 8px 12px; border: none; border-radius: 5px; color: #fff; cursor: pointer; font-size: 0.9em; transition: background-color 0.3s ease; margin-right: 5px; } .save-btn { background-color: #28a745; } .save-btn:hover { background-color: #1e7e34; } .cancel-btn { background-color: #dc3545; } .cancel-btn:hover { background-color: #c82333; } /* Theme Toggle Button Container */ #theme-toggle-container { display: flex; justify-content: flex-end; /* Align to the right */ width: 100%; /* Full width within header */ padding-top: 10px; /* Add some space above the button */ text-align: right; /* Ensure button aligns right */ } /* Theme Toggle Button */ #theme-toggle { padding: 10px 15px; border: none; border-radius: 5px; background-color: #eee; color: #333; cursor: pointer; transition: background-color 0.3s ease; } #theme-toggle:hover { background-color: #ccc; } /* Dark Mode Styles */ body.dark-mode { background-color: #333; color: #f4f4f4; } body.dark-mode header, body.dark-mode footer { background-color: #222; color: #fff; } body.dark-mode header nav { background-color: #333; /* Match header background in dark mode */ } body.dark-mode header nav a { background-color: transparent; /* Keep nav link background transparent in dark mode */ color: #eee; } body.dark-mode header nav a:hover { background-color: #555; } body.dark-mode .card { background-color: #444; color: #eee; box-shadow: 0 2px 5px rgba(255, 255, 255, 0.1); } body.dark-mode .edit-btn, body.dark-mode .save-cancel-btns button { background-color: #555; color: #eee; } body.dark-mode .edit-btn:hover, body.dark-mode .save-cancel-btns button:hover { background-color: #777; } body.dark-mode #theme-toggle { background-color: #555; color: #eee; } body.dark-mode #theme-toggle:hover { background-color: #777; } document.addEventListener('DOMContentLoaded', () => { const themeToggle = document.getElementById('theme-toggle'); const body = document.body; const navLinks = document.querySelectorAll('header nav a'); const panels = document.querySelectorAll('.panel'); const editButtons = document.querySelectorAll('.edit-btn'); // Dashboard card editing functionality editButtons.forEach(button => { button.addEventListener('click', () => { const cardId = button.dataset.card; const card = document.getElementById(cardId); const cardContent = card.querySelector('.card-content'); const isEditing = card.dataset.editing === 'true'; if (!isEditing) { startEditing(card, cardContent); } }); }); function startEditing(card, cardContent) { card.dataset.editing = 'true'; const originalContent = cardContent.innerHTML; let inputFieldsHTML = ''; cardContent.querySelectorAll('.editable-list').forEach(list => { let listItemsHTML = ''; list.querySelectorAll('li').forEach(item => { listItemsHTML += `

`; }); inputFieldsHTML += `

${listItemsHTML}`; }); cardContent.querySelectorAll('.editable-text').forEach(textElement => { inputFieldsHTML += ``; }); cardContent.innerHTML = `

${inputFieldsHTML}

`; const saveCancelBtns = cardContent.querySelector('.save-cancel-btns'); saveCancelBtns.style.display = 'block'; // Show buttons const saveBtn = cardContent.querySelector('.save-btn'); const cancelBtn = cardContent.querySelector('.cancel-btn'); cancelBtn.addEventListener('click', () => { card.dataset.editing = 'false'; cardContent.innerHTML = originalContent; // Revert to original content }); saveBtn.addEventListener('click', () => { card.dataset.editing = 'false'; let updatedContentHTML = ''; const editingList = cardContent.querySelectorAll('.editing-list'); editingList.forEach(list => { updatedContentHTML += '

${input.value}

'; }); const textInputs = cardContent.querySelectorAll('.text-input'); textInputs.forEach(input => { updatedContentHTML += `

${input.value}

`; }); cardContent.innerHTML = updatedContentHTML; saveDashboardContent(); // Save updated dashboard content }); } function saveDashboardContent() { const dashboardData = {}; document.querySelectorAll('.card').forEach(card => { dashboardData[card.id] = card.querySelector('.card-content').innerHTML; }); localStorage.setItem('dashboardContent', JSON.stringify(dashboardData)); } function loadDashboardContent() { const storedDashboardContent = localStorage.getItem('dashboardContent'); if (storedDashboardContent) { const dashboardData = JSON.parse(storedDashboardContent); Object.keys(dashboardData).forEach(cardId => { const card = document.getElementById(cardId); if (card) { card.querySelector('.card-content').innerHTML = dashboardData[cardId]; } }); } } loadDashboardContent(); // Load dashboard content on page load // Inventory Panel Functionality (remains the same) const addProductBtn = document.getElementById('addProductBtn'); const viewInventoryBtn = document.getElementById('viewInventoryBtn'); const inventoryList = document.getElementById('inventoryList'); const itemNameInput = document.getElementById('itemName'); const itemQuantityInput = document.getElementById('itemQuantity'); let inventoryData = loadInventoryData(); // Load existing data displayInventory(); // Initial display on page load function saveInventoryData(inventory) { localStorage.setItem('inventory', JSON.stringify(inventory)); } function loadInventoryData() { const storedInventory = localStorage.getItem('inventory'); return storedInventory ? JSON.parse(storedInventory) : []; } function displayInventory() { inventoryList.innerHTML = ''; // Clear existing list inventoryData.forEach(item => { const listItem = document.createElement('li'); listItem.textContent = `${item.itemName} - Quantity: ${item.itemQuantity}`; inventoryList.appendChild(listItem); }); } addProductBtn.addEventListener('click', () => { const itemName = itemNameInput.value; const itemQuantity = parseInt(itemQuantityInput.value); if (itemName && !isNaN(itemQuantity)) { inventoryData.push({ itemName: itemName, itemQuantity: itemQuantity }); saveInventoryData(inventoryData); displayInventory(); // Update displayed list itemNameInput.value = ''; // Clear input fields itemQuantityInput.value = ''; } else { alert('Please enter valid item name and quantity.'); } }); viewInventoryBtn.addEventListener('click', () => { displayInventory(); }); // Theme functionality (remains the same) function setTheme(theme) { if (theme === 'dark') { body.classList.add('dark-mode'); themeToggle.textContent = 'Light Mode'; } else { body.classList.remove('dark-mode'); themeToggle.textContent = 'Dark Mode'; } localStorage.setItem('theme', theme); } // Get stored theme or default to light const currentTheme = localStorage.getItem('theme') || 'light'; setTheme(currentTheme); // Toggle theme on button click themeToggle.addEventListener('click', () => { const newTheme = body.classList.contains('dark-mode') ? 'light' : 'dark'; setTheme(newTheme); }); // Panel navigation and restore last active panel (remains the same) let lastActivePanel = localStorage.getItem('activePanel') || 'dashboard'; function setActivePanel(panelId) { panels.forEach(panel => panel.classList.remove('active')); document.getElementById(panelId + '-panel').classList.add('active'); localStorage.setItem('activePanel', panelId); } navLinks.forEach(link => { link.addEventListener('click', (event) => { event.preventDefault(); const panelId = link.getAttribute('data-panel'); setActivePanel(panelId); }); }); setActivePanel(lastActivePanel); // Set initial active panel from localStorage or default });