Skip to main content

​
Overview

The Configuration panel (panel_configuracion.html) provides centralized access to business settings, system preferences, user management, and data operations. Access it from Sistema > Configuración in the sidebar navigation.
Configuration changes affect the entire system. Some settings require administrator privileges.

​
Configuration Tabs

The configuration interface is organized into five main sections:

​
🏪 Negocio (Business)

Configure your business information and operational details.

​
Business Details

1

Business Information

Set your business name, tax identification (RFC/NIT/RUC), and contact detailsFields:
  • Nombre del Negocio: Your business legal name
  • RFC / NIT / RUC: Tax identification number
  • Dirección: Full street address
  • Ciudad: City name
  • País: Country selection (México, Colombia, Argentina, España)
2

Contact Information

Configure communication channelsFields:
  • Teléfono: Business phone number (format: +52 55 0000 0000)
  • Correo Electrónico: Business email address
3

Currency Settings

Select your business currencyAvailable Currencies:
  • MXN – Peso Mexicano
  • COP – Peso Colombiano
  • USD – Dólar Estadounidense
  • EUR – Euro
Currency changes may affect existing transactions and reports. Consult your accountant before changing currency settings.

​
Saving Changes

After modifying business settings:
  1. Review all changes carefully
  2. Click 💾 Guardar Cambios (Save Changes)
  3. The system will display a confirmation alert
Source: public/js/configuracion.js:13-16
configuracion.js
document.getElementById('btn-guardar')?.addEventListener('click', () => {
  // TODO: integrar con Firebase
  alert('Configuración guardada.');
});

​
👤 Usuarios (Users)

Manage user accounts, permissions, and roles.
User management functionality is currently accessed through the employee creation form. See User Management below.

​
🔔 Notificaciones (Notifications)

Configure notification preferences and alert thresholds.

​
🧾 Facturación (Billing)

Set up invoicing preferences and tax settings.

​
💾 Datos (Data)

Manage data backup, export, and database operations.

​
System Preferences

The configuration panel includes several system-wide toggles:

​
Available Settings

Status: Enabled by defaultDescription: Notify when a product falls below its minimum stock levelImpact: Affects dashboard alerts and notification systemRecommended: Keep enabled to prevent stockouts
Status: Disabled by defaultDescription: Display prices with tax already includedImpact: Changes how prices are displayed in the POS and inventoryNote: The POS system currently applies 16% IVA at checkout
Status: Enabled by defaultDescription: Generate PDF receipt automatically after each saleImpact: Creates downloadable receipts for transactionsRecommended: Keep enabled for record-keeping
Status: Disabled by defaultDescription: Switch system appearance to dark themeImpact: Changes the entire UI color scheme
Status: Enabled by defaultDescription: Send daily summary report via email at end of business dayImpact: Automated email reports to configured address

​
Toggle Behavior

Toggles in the configuration panel use a simple on/off switch: Source: public/js/configuracion.js:9-11
configuracion.js
document.querySelectorAll('.toggle').forEach(t => {
  t.addEventListener('click', () => t.classList.toggle('on'));
});
Click any toggle to switch between enabled (green) and disabled (gray) states.

​
User Management

StockPro includes a user creation system for adding employees with different permission levels.

​
Creating New Users

Source: public/js/agregar_empleado.js The employee creation form allows administrators to add new users to the system:
agregar_empleado.js
const usuario = {
    uid: user.uid,
    name: name,
    email: email,
    tipo: tipo  // User role type
};

await addDoc(collection(db, "usuarios"), usuario);

​
User Roles

StockPro supports three user role types:

Admin

Full system access including configuration and user management

Gerente

Manager access to reports, inventory, and sales operations

Empleado

Employee access to basic operations like processing sales

​
User Creation Process

1

Email Validation

The system checks if the email is already registered using Firebase Authentication
agregar_empleado.js:16-26
fetchSignInMethodsForEmail(auth, emailToCheck)
    .then((signInMethods) => {
        if (signInMethods && signInMethods.length > 0) {
            console.log(`El correo ${emailToCheck} ya registrado.`);
        }
    })
2

Create Authentication Account

Creates a Firebase Authentication account for the new user
agregar_empleado.js:29-30
const credenciales = await createUserWithEmailAndPassword(auth, email, password);
const user = credenciales.user;
3

Store User Profile

Saves user details to the usuarios Firestore collectionFields stored:
  • uid: Firebase Authentication user ID
  • name: User’s display name
  • email: User’s email address
  • tipo: Role type (admin, gerente, empleado)
See Firestore Collections for complete usuarios schema details.

​
Danger Zone

The configuration panel includes destructive operations that cannot be undone:
These actions are irreversible and will permanently delete data. Use with extreme caution.

​
Available Operations

🗑️ Eliminar todos los productos
  • Deletes all products from inventory
  • Cannot be reversed
  • Recommended: Export data first
📤 Exportar y limpiar base de datos
  • Exports current database to backup file
  • Clears all data after export
  • Use for fresh start or data migration
⛔ Restablecer configuración de fábrica
  • Resets all settings to default values
  • Removes all custom configurations
  • Does not delete products or sales data
Always create a backup before performing any destructive operations.

​
Tab Navigation

The configuration panel uses a tab-based interface for organization. Source: public/js/configuracion.js:2-7
configuracion.js
document.querySelectorAll('.cfg-tab').forEach(tab => {
  tab.addEventListener('click', () => {
    document.querySelectorAll('.cfg-tab').forEach(t => t.classList.remove('activo'));
    tab.classList.add('activo');
  });
});
Behavior:
  • Click any tab to switch sections
  • Active tab is highlighted with .activo class
  • Only one tab can be active at a time

​
Access Control

The configuration panel is protected by Firebase Authentication: Source: public/js/auth.js:11
auth.js
if (pagina === "panel_configuracion.html") return window.location.href = "login.html";
Users must be authenticated to access configuration settings. Unauthenticated users are redirected to the login page.
See Authentication for details on the authentication system.

Security Rules

Configure Firestore security rules for user roles

User Authentication

API reference for user creation and management functions

Firestore Collections

Database schema for usuarios collection

Firebase Setup

Initial Firebase configuration guide

Build docs developers (and LLMs) love

Get started for freeTalk to us