Skip to main content
The Product Management module enables you to add new products to your inventory with complete information including pricing, stock control, and product details.

​
Form Layout

The new product form uses a two-column layout for efficient data entry:

Left Column

Product information, description, category, brand, and product image upload

Right Column

Pricing details, profit margin calculation, and inventory control settings

​
Product Information Section

The primary product details card includes essential identification fields:

​
Product Name *

Ej. Audífonos Bluetooth Pro
Required field - The main product name that appears throughout the system, on sales receipts, and in the POS catalog.

​
Product Description

Características, usos, especificaciones...
A multi-line text area for detailed product information:
  • Features and specifications
  • Usage instructions
  • Technical details
  • Compatibility information
Include searchable keywords in the description to help staff quickly find products during sales.

​
Category Selection *

Required field - Choose from predefined categories:
  • Audio - Headphones, speakers, audio equipment
  • Electrónica - Electronic devices and equipment
  • Periféricos - Computer peripherals (keyboards, mice)
  • Accesorios - Cables, adapters, and accessories
Categories help organize inventory and enable filtering in the POS and inventory views.

​
Brand/Manufacturer

Ej. SoundMax
Enter the product’s brand or manufacturer name:
  • SoundMax
  • TechLine
  • KeyCraft
  • ErgoTech
  • ConnectPro
Brand information appears below the product name throughout the system.

​
Pricing Configuration

The pricing card manages all financial aspects of the product:

​
Purchase Price (Cost) *

Input type: number
Format: 0.00
Min: 0
Step: 0.01
Required field - The amount you pay to acquire the product from suppliers. Used for profit margin calculations.

​
Sale Price *

Input type: number  
Format: 0.00
Min: 0
Step: 0.01
Required field - The price customers pay. This amount appears in the POS system and on receipts.

​
Automatic Profit Margin Calculation

The system automatically calculates and displays profit margin as you enter pricing:
Margin Formula: ((Sale Price - Purchase Price) / Sale Price) × 100Example:
  • Purchase Price: $50.00
  • Sale Price: $89.99
  • Calculated Margin: 44.5%
This read-only field updates in real-time as you adjust pricing.

​
Pricing JavaScript Logic

The profit margin calculation is implemented in nuevo-producto.js:5: 
function calcMargen() {
  const c = parseFloat(costo.value), v = parseFloat(venta.value);
  margen.value = (c > 0 && v > 0) ? ((v - c) / v * 100).toFixed(1) + '%' : '';
}
This function:
  • Monitors both cost and sale price fields
  • Validates that both values are positive
  • Calculates percentage margin
  • Displays result formatted to 1 decimal place

​
Inventory Control Settings

The Control de Inventario card manages stock tracking:

​
Initial Quantity *

Input type: number
Placeholder: 0
Min: 0
Required field - The starting stock quantity when adding the product. This becomes the current stock level in inventory.

​
Minimum Stock Level

Placeholder: 5
The reorder threshold that triggers low stock alerts:
  • When current stock drops below this number, the system displays warnings
  • Dashboard shows “Stock Bajo” alerts
  • Product appears with orange badge in inventory
Set minimum stock based on:
  • Average daily sales velocity
  • Supplier lead time
  • Seasonal demand fluctuations
  • Storage capacity

​
Maximum Stock Level

Placeholder: 500
The upper inventory limit for the product:
  • Prevents overstocking
  • Helps with warehouse space planning
  • Guides reorder quantities

​
Product Image Upload

The image upload card provides a drag-and-drop interface: 
🖼️ Arrastra una imagen aquí o haz clic para seleccionar
JPG, PNG, WEBP · Máx. 5 MB

​
Supported Formats

  • JPG/JPEG - Standard photo format
  • PNG - Transparent backgrounds supported
  • WEBP - Modern compressed format

​
File Size Limit

Maximum: 5 MB per image
Use clear, well-lit product photos on white backgrounds for the best appearance in the POS catalog.

​
Form Actions

Three action buttons control the form submission:

​
Cancel Button

document.getElementById('btn-cancelar').addEventListener('click', () => {
  window.location.href = 'panel_inventario.html';
});
Discards all entered data and returns to the inventory page.

​
Save Draft Button

Stores product information without finalizing the entry. Allows you to:
  • Save work in progress
  • Return later to complete details
  • Prevent data loss

​
Save Product Button ✅

The primary action button validates and saves the product: 
document.getElementById('btn-guardar').addEventListener('click', () => {
  const nombre = document.getElementById('nombre').value.trim();
  const sku    = document.getElementById('sku').value.trim();
  if (!nombre || !sku) { 
    alert('Completa los campos obligatorios (Nombre y SKU).'); 
    return; 
  }
  // Integration with Firebase
  alert(`Producto "${nombre}" guardado.`);
  window.location.href = 'panel_inventario.html';
});

​
Validation Rules

Before saving, the system validates:

Required Fields

  • Product Name
  • Category
  • Purchase Price
  • Sale Price
  • Initial Quantity

Data Types

  • Numeric values for prices and quantities
  • Positive numbers only
  • Proper decimal formatting

​
Field Dependencies

Some fields interact with each other:

​
Profit Margin Auto-Update

The margin field automatically recalculates when:
  • Purchase price changes
  • Sale price changes
  • Either field is cleared
Implemented via event listeners: 
costo.addEventListener('input', calcMargen);
venta.addEventListener('input', calcMargen);

​
Data Integration

Once saved, product data is:
  1. Stored in Firebase database
  2. Appears immediately in inventory list
  3. Available in POS catalog for sales
  4. Included in reports and analytics
  5. Tracked for stock alerts based on minimum levels

​
Commented/Optional Fields

The source code includes several commented-out fields that could be enabled:
SKU Code (panel_nuevo_producto.html:70-73)
  • Unique product identifier
  • Barcode scanning support
Barcode (panel_nuevo_producto.html:75-77)
  • UPC/EAN code entry
  • Retail barcode standard
Supplier Selection (panel_nuevo_producto.html:92-100)
  • Choose from supplier list
  • Reorder automation
Tax Settings (panel_nuevo_producto.html:134-141)
  • IVA 16%
  • IVA 19%
  • No tax option
Warehouse Location (panel_nuevo_producto.html:161-163)
  • Aisle and shelf position
  • Physical inventory tracking
Unit of Measure (panel_nuevo_producto.html:165-172)
  • Unit (und.)
  • Kilogram (kg)
  • Liter (L)
  • Box (Caja)
These fields are currently disabled in the interface but can be activated by uncommenting the HTML sections for advanced inventory management features.

​
After Saving

When a product is successfully saved:
  1. Confirmation message appears
  2. System redirects to inventory page
  3. New product appears in the table
  4. Product is available for POS transactions
  5. Stock tracking begins immediately
Best Practice: Add products during low-traffic periods to ensure accurate data entry and avoid interrupting sales operations.

Build docs developers (and LLMs) love

Get started for freeTalk to us