1079 lines
60 KiB
HTML
1079 lines
60 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<script>/*pos_theme_early*/(function(){var t=localStorage.getItem("pos_theme")||"industrial";document.documentElement.setAttribute("data-theme",t);})()</script>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Configuración — Nexus Autoparts POS</title>
|
|
<link rel="stylesheet" href="/pos/static/css/chat.css" />
|
|
<link rel="stylesheet" href="/pos/static/css/tokens.css" />
|
|
<link rel="stylesheet" href="/pos/static/css/common.css" />
|
|
<link rel="stylesheet" href="/pos/static/css/pos-ui.css?v=33" />
|
|
<link rel="stylesheet" href="/pos/static/css/sidebar.css" />
|
|
<link rel="stylesheet" href="/pos/static/css/pos-glass.css" />
|
|
<link rel="manifest" href="/pos/static/pwa/manifest.json" />
|
|
<meta name="theme-color" content="#F5A623" />
|
|
<link rel="shortcut icon" type="image/png" href="/pos/static/pwa/icon-192.png" />
|
|
|
|
<link rel="stylesheet" href="/pos/static/css/config.css?v=34">
|
|
<style>
|
|
.cfg-tabs {
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
padding: var(--space-3) var(--space-4);
|
|
border-bottom: 1px solid var(--color-border);
|
|
background: var(--color-surface-1);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
flex-wrap: wrap;
|
|
}
|
|
.cfg-tab-btn {
|
|
padding: var(--space-2) var(--space-4);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--color-surface-2);
|
|
color: var(--color-text-secondary);
|
|
cursor: pointer;
|
|
font-size: var(--text-body-sm);
|
|
font-weight: var(--font-weight-medium);
|
|
}
|
|
.cfg-tab-btn:hover { background: var(--color-surface-3); }
|
|
.cfg-tab-btn.active {
|
|
background: var(--color-accent);
|
|
color: #fff;
|
|
border-color: var(--color-accent);
|
|
}
|
|
.settings-section[data-tab] { display: none !important; }
|
|
.settings-section[data-tab].active { display: block !important; }
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- =========================================================================
|
|
THEME SWITCHER BAR
|
|
========================================================================= -->
|
|
|
|
<div class="theme-bar">
|
|
<div class="theme-bar__left">
|
|
<div class="theme-bar__store">
|
|
<span class="theme-bar__dot"></span>
|
|
Nexus Autoparts
|
|
</div>
|
|
<div class="theme-bar__sep"></div>
|
|
<span class="theme-bar__label">Design System Preview</span>
|
|
</div>
|
|
<div class="theme-bar__right">
|
|
<button class="theme-btn theme-btn--industrial is-active" data-theme-target="industrial" onclick="setTheme('industrial')">
|
|
<span class="theme-btn__swatch"></span> Industrial
|
|
</button>
|
|
<button class="theme-btn theme-btn--modern" data-theme-target="modern" onclick="setTheme('modern')">
|
|
<span class="theme-btn__swatch"></span> Moderno
|
|
</button>
|
|
<div class="theme-bar__sep"></div>
|
|
<span class="theme-bar__label" id="live-clock">--:--</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- =========================================================================
|
|
APP SHELL
|
|
========================================================================= -->
|
|
|
|
<div class="app-shell">
|
|
|
|
<!-- SIDEBAR -->
|
|
<aside class="sidebar">
|
|
<div class="sidebar__brand">
|
|
<div class="brand-logo">N</div>
|
|
<div>
|
|
<div class="brand-name__primary">Nexus</div>
|
|
<div class="brand-name__sub">Autoparts</div>
|
|
</div>
|
|
</div>
|
|
|
|
<nav class="sidebar__nav">
|
|
<div class="nav-section-label">Principal</div>
|
|
<a class="nav-item" href="/pos/dashboard">
|
|
<svg class="nav-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
|
|
Dashboard
|
|
</a>
|
|
<a class="nav-item" href="/pos/sale">
|
|
<svg class="nav-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="2" y1="20" x2="22" y2="20"/></svg>
|
|
Punto de Venta
|
|
</a>
|
|
<a class="nav-item" href="/pos/catalog">
|
|
<svg class="nav-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
|
|
Catálogo
|
|
</a>
|
|
|
|
<div class="nav-section-label">Operaciones</div>
|
|
<a class="nav-item" href="/pos/inventory">
|
|
<svg class="nav-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>
|
|
Inventario
|
|
</a>
|
|
<a class="nav-item" href="/pos/customers">
|
|
<svg class="nav-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
|
|
Clientes
|
|
</a>
|
|
<a class="nav-item" href="/pos/workshop">
|
|
<svg class="nav-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
|
|
Taller
|
|
</a>
|
|
|
|
<div class="nav-section-label">Finanzas</div>
|
|
<a class="nav-item" href="/pos/invoicing">
|
|
<svg class="nav-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
|
|
Facturación
|
|
</a>
|
|
<a class="nav-item" href="/pos/accounting">
|
|
<svg class="nav-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
|
|
Contabilidad
|
|
</a>
|
|
|
|
<div class="nav-section-label">Sistema</div>
|
|
<a class="nav-item" href="/pos/reports">
|
|
<svg class="nav-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
|
|
Reportes
|
|
</a>
|
|
<a class="nav-item is-active" href="/pos/config">
|
|
<svg class="nav-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
|
|
Configuración
|
|
</a>
|
|
</nav>
|
|
|
|
<div class="sidebar__footer">
|
|
<div class="sidebar__user-avatar">AM</div>
|
|
<div class="sidebar__user-info">
|
|
<div class="sidebar__user-name">Admin</div>
|
|
<div class="sidebar__user-role">Administrador</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- MAIN CONTENT -->
|
|
<main class="main">
|
|
|
|
<!-- Page Header -->
|
|
<header class="page-header">
|
|
<div class="page-header__title-group">
|
|
<span class="page-header__eyebrow">Sistema</span>
|
|
<h1 class="page-header__title">Configuración</h1>
|
|
</div>
|
|
<div class="page-header__actions">
|
|
<button id="btn-save-all" class="btn btn--primary" type="button">
|
|
<svg viewBox="0 0 24 24"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>
|
|
Guardar Cambios
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Scrollable Content -->
|
|
<div class="content-scroll">
|
|
<!-- Config tabs -->
|
|
<div class="cfg-tabs" id="configTabs">
|
|
<button class="cfg-tab-btn active" data-tab="general" onclick="Config.switchTab('general')">General</button>
|
|
<button class="cfg-tab-btn" data-tab="fiscal" onclick="Config.switchTab('fiscal')">Fiscal</button>
|
|
<button class="cfg-tab-btn" data-tab="catalog" onclick="Config.switchTab('catalog')">Catálogo</button>
|
|
<button class="cfg-tab-btn" data-tab="employees" onclick="Config.switchTab('employees')">Empleados</button>
|
|
<button class="cfg-tab-btn cfg-tab-btn--permissions" data-tab="permissions" onclick="Config.switchTab('permissions')" style="display:none;">Permisos</button>
|
|
</div>
|
|
|
|
|
|
<!-- ===============================================================
|
|
SECTION 1: APARIENCIA / TEMA
|
|
=============================================================== -->
|
|
<div class="settings-section" data-tab="general">
|
|
<div class="settings-section__header">
|
|
<div class="settings-section__icon">
|
|
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
|
|
</div>
|
|
<div>
|
|
<div class="settings-section__title">Apariencia</div>
|
|
<div class="settings-section__desc">Selecciona el tema visual del sistema</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="theme-selector">
|
|
<div class="theme-option is-selected" onclick="selectThemeOption('industrial')">
|
|
<div class="theme-option__check">
|
|
<svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>
|
|
</div>
|
|
<div class="theme-option__preview theme-option__preview--dark">
|
|
<div class="theme-option__preview-logo theme-option__preview-logo--dark">N</div>
|
|
<div class="theme-option__preview-text">
|
|
<div class="theme-option__preview-bar"></div>
|
|
<div class="theme-option__preview-bar"></div>
|
|
<div class="theme-option__preview-bar"></div>
|
|
</div>
|
|
</div>
|
|
<div class="theme-option__name">Tema A — Industrial Robusto</div>
|
|
<div class="theme-option__desc">Fondo oscuro, acentos ámbar, tipografía Barlow Condensed</div>
|
|
<div class="theme-option__colors">
|
|
<div class="theme-option__swatch" style="background: #0d0d0d;"></div>
|
|
<div class="theme-option__swatch" style="background: #1a1a1a;"></div>
|
|
<div class="theme-option__swatch" style="background: #F5A623;"></div>
|
|
<div class="theme-option__swatch" style="background: #333333;"></div>
|
|
<div class="theme-option__swatch" style="background: #FFFFFF;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="theme-option" onclick="selectThemeOption('modern')">
|
|
<div class="theme-option__check">
|
|
<svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>
|
|
</div>
|
|
<div class="theme-option__preview theme-option__preview--light">
|
|
<div class="theme-option__preview-logo theme-option__preview-logo--light">N</div>
|
|
<div class="theme-option__preview-text">
|
|
<div class="theme-option__preview-bar"></div>
|
|
<div class="theme-option__preview-bar"></div>
|
|
<div class="theme-option__preview-bar"></div>
|
|
</div>
|
|
</div>
|
|
<div class="theme-option__name">Tema B — Técnico Moderno</div>
|
|
<div class="theme-option__desc">Fondo claro, acentos naranja, tipografía Poppins</div>
|
|
<div class="theme-option__colors">
|
|
<div class="theme-option__swatch" style="background: #FFFFFF;"></div>
|
|
<div class="theme-option__swatch" style="background: #F8F9FF;"></div>
|
|
<div class="theme-option__swatch" style="background: #FF6B35;"></div>
|
|
<div class="theme-option__swatch" style="background: #1a1a2e;"></div>
|
|
<div class="theme-option__swatch" style="background: #e2e4f0;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===============================================================
|
|
SECTION 2: DATOS DE LA EMPRESA
|
|
=============================================================== -->
|
|
<div class="settings-section" data-tab="general">
|
|
<div class="settings-section__header">
|
|
<div class="settings-section__icon">
|
|
<svg viewBox="0 0 24 24"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
|
|
</div>
|
|
<div>
|
|
<div class="settings-section__title">Datos de la Empresa</div>
|
|
<div class="settings-section__desc">Información fiscal y comercial</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-card">
|
|
<div class="form-grid">
|
|
<div class="form-group">
|
|
<label class="form-label">Razón Social</label>
|
|
<input class="form-input" id="biz-razon-social" type="text" value="" placeholder="Ej: Refacciones El Toro S.A. de C.V." />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Nombre Comercial</label>
|
|
<input class="form-input" id="biz-nombre" type="text" value="" placeholder="Ej: Refacciones El Toro" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">RFC</label>
|
|
<input class="form-input" id="biz-rfc" type="text" value="" placeholder="Ej: RET260101ABC" maxlength="13" style="text-transform:uppercase;" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Régimen Fiscal</label>
|
|
<input class="form-input" id="biz-regimen" type="text" value="" placeholder="Ej: 601 - General de Ley" />
|
|
</div>
|
|
<div class="form-group form-group--full">
|
|
<label class="form-label">Dirección Fiscal</label>
|
|
<input class="form-input" id="biz-direccion" type="text" value="" placeholder="Calle, Numero, Colonia, CP, Ciudad" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Teléfono</label>
|
|
<input class="form-input" id="biz-telefono" type="tel" value="" placeholder="Ej: 664-123-4567" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Email</label>
|
|
<input class="form-input" id="biz-email" type="email" value="" placeholder="Ej: contacto@refacciones.com" />
|
|
</div>
|
|
</div>
|
|
<div style="margin-top:var(--space-4);text-align:right;">
|
|
<button class="btn btn--primary" onclick="Config.saveBusiness()">Guardar datos de empresa</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===============================================================
|
|
SECTION 3: PERSONALIZACIÓN DE TICKET
|
|
=============================================================== -->
|
|
<div class="settings-section" data-tab="general">
|
|
<div class="settings-section__header">
|
|
<div class="settings-section__icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
|
|
</div>
|
|
<div>
|
|
<div class="settings-section__title">Personalización de Ticket</div>
|
|
<div class="settings-section__desc">Logo, datos y opciones que aparecen en el ticket de venta</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-card">
|
|
<div class="form-grid">
|
|
<div class="form-group form-group--full">
|
|
<label class="form-label">Logo del negocio</label>
|
|
<input type="file" id="receipt-logo" accept="image/png,image/jpeg,image/jpg,image/webp" onchange="Config.handleReceiptLogo(this)" style="display:none;" />
|
|
<div id="receipt-logo-preview" style="display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;">
|
|
<div id="receipt-logo-thumb" style="width:80px;height:80px;border:1px dashed var(--color-border);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--color-surface-2);">
|
|
<span style="color:var(--color-text-muted);font-size:var(--text-caption);text-align:center;padding:var(--space-2);">Sin logo</span>
|
|
</div>
|
|
<button class="btn btn--secondary btn--sm" onclick="document.getElementById('receipt-logo').click()">Subir imagen</button>
|
|
<button class="btn btn--ghost btn--sm" id="receipt-logo-remove" onclick="Config.removeReceiptLogo()" style="display:none;">Quitar</button>
|
|
</div>
|
|
<div class="form-hint">Recomendado: PNG/JPG con fondo blanco o transparente, máx. 300x150 px.</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Nombre en ticket</label>
|
|
<input class="form-input" id="receipt-store-name" type="text" placeholder="Ej: Refacciones El Toro" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Slogan / Línea debajo del nombre</label>
|
|
<input class="form-input" id="receipt-tagline" type="text" placeholder="Ej: Tu conexion con las refacciones" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">RFC en ticket</label>
|
|
<input class="form-input" id="receipt-rfc" type="text" placeholder="Ej: RET260101ABC" maxlength="13" style="text-transform:uppercase;" />
|
|
</div>
|
|
<div class="form-group form-group--full">
|
|
<label class="form-label">Dirección en ticket</label>
|
|
<input class="form-input" id="receipt-address" type="text" placeholder="Calle, Número, Colonia, CP, Ciudad" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Teléfono en ticket</label>
|
|
<input class="form-input" id="receipt-phone" type="tel" placeholder="Ej: 664-123-4567" />
|
|
</div>
|
|
<div class="form-group form-group--full">
|
|
<label class="form-label">Mensaje de agradecimiento</label>
|
|
<input class="form-input" id="receipt-thanks" type="text" placeholder="Gracias por su compra!" />
|
|
</div>
|
|
<div class="form-group form-group--full">
|
|
<label class="form-label">Pie de página adicional</label>
|
|
<input class="form-input" id="receipt-footer" type="text" placeholder="Ej: Conserve su ticket como comprobante." />
|
|
</div>
|
|
</div>
|
|
<div class="form-grid" style="margin-top:var(--space-4);">
|
|
<label style="display:flex;align-items:center;gap:var(--space-2);cursor:pointer;"><input type="checkbox" id="receipt-show-logo" style="width:auto;" checked /> Mostrar logo</label>
|
|
<label style="display:flex;align-items:center;gap:var(--space-2);cursor:pointer;"><input type="checkbox" id="receipt-show-rfc" style="width:auto;" checked /> Mostrar RFC</label>
|
|
<label style="display:flex;align-items:center;gap:var(--space-2);cursor:pointer;"><input type="checkbox" id="receipt-show-address" style="width:auto;" /> Mostrar dirección</label>
|
|
<label style="display:flex;align-items:center;gap:var(--space-2);cursor:pointer;"><input type="checkbox" id="receipt-show-phone" style="width:auto;" /> Mostrar teléfono</label>
|
|
<label style="display:flex;align-items:center;gap:var(--space-2);cursor:pointer;"><input type="checkbox" id="receipt-show-iva" style="width:auto;" checked /> Mostrar desglose de IVA</label>
|
|
<label style="display:flex;align-items:center;gap:var(--space-2);cursor:pointer;"><input type="checkbox" id="receipt-show-payment" style="width:auto;" checked /> Mostrar detalle de pago</label>
|
|
<label style="display:flex;align-items:center;gap:var(--space-2);cursor:pointer;"><input type="checkbox" id="receipt-show-employee" style="width:auto;" /> Mostrar nombre del empleado</label>
|
|
</div>
|
|
<div style="margin-top:var(--space-4);text-align:right;">
|
|
<button class="btn btn--primary" onclick="Config.saveReceiptConfig()">Guardar ticket</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===============================================================
|
|
SECTION 4: MÓDULOS E INTEGRACIONES
|
|
=============================================================== -->
|
|
<div class="settings-section" data-tab="general">
|
|
<div class="settings-section__header">
|
|
<div class="settings-section__icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>
|
|
</div>
|
|
<div>
|
|
<div class="settings-section__title">Módulos e Integraciones</div>
|
|
<div class="settings-section__desc">Activa o desactiva funcionalidades del menú para este tenant</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-card">
|
|
<div class="toggle-row">
|
|
<div class="toggle-row__info">
|
|
<span class="toggle-row__label">WhatsApp</span>
|
|
<span class="toggle-row__desc">Mostrar el menú de WhatsApp Bridge y chat</span>
|
|
</div>
|
|
<label class="toggle">
|
|
<input type="checkbox" id="cfg-module-whatsapp" checked />
|
|
<span class="toggle__slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="toggle-row">
|
|
<div class="toggle-row__info">
|
|
<span class="toggle-row__label">Marketplace</span>
|
|
<span class="toggle-row__desc">Mostrar el menú de Marketplace interno</span>
|
|
</div>
|
|
<label class="toggle">
|
|
<input type="checkbox" id="cfg-module-marketplace" checked />
|
|
<span class="toggle__slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="toggle-row">
|
|
<div class="toggle-row__info">
|
|
<span class="toggle-row__label">MercadoLibre</span>
|
|
<span class="toggle-row__desc">Mostrar el menú de integración con MercadoLibre</span>
|
|
</div>
|
|
<label class="toggle">
|
|
<input type="checkbox" id="cfg-module-meli" checked />
|
|
<span class="toggle__slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="toggle-row">
|
|
<div class="toggle-row__info">
|
|
<span class="toggle-row__label">Catálogo</span>
|
|
<span class="toggle-row__desc">Mostrar el menú de Catálogo de productos</span>
|
|
</div>
|
|
<label class="toggle">
|
|
<input type="checkbox" id="cfg-module-catalog" checked />
|
|
<span class="toggle__slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="toggle-row">
|
|
<div class="toggle-row__info">
|
|
<span class="toggle-row__label">Taller / Servicio</span>
|
|
<span class="toggle-row__desc">Mostrar el módulo de órdenes de servicio y taller</span>
|
|
</div>
|
|
<label class="toggle">
|
|
<input type="checkbox" id="cfg-module-workshop" checked />
|
|
<span class="toggle__slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="toggle-row">
|
|
<div class="toggle-row__info">
|
|
<span class="toggle-row__label">Notas de remisión en mostrador</span>
|
|
<span class="toggle-row__desc">Permite generar notas de remisión desde el POS para cobrar posteriormente en caja</span>
|
|
</div>
|
|
<label class="toggle">
|
|
<input type="checkbox" id="cfg-module-counter-remission" />
|
|
<span class="toggle__slider"></span>
|
|
</label>
|
|
</div>
|
|
<div style="margin-top:var(--space-4);text-align:right;">
|
|
<button class="btn btn--primary" onclick="Config.saveModules()">Guardar módulos</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===============================================================
|
|
SECTION 4: USUARIOS Y PERMISOS
|
|
=============================================================== -->
|
|
<div class="settings-section" data-tab="employees">
|
|
<div class="settings-section__header">
|
|
<div class="settings-section__icon">
|
|
<svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
|
|
</div>
|
|
<div>
|
|
<div class="settings-section__title">Empleados</div>
|
|
<div class="settings-section__desc">Gestiona quién accede al sistema y qué puede hacer</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-card" style="padding: 0;">
|
|
<div style="padding: var(--space-4) var(--space-5); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--color-border);">
|
|
<span id="employees-count" style="font-weight: var(--font-weight-semibold); color: var(--color-text-primary);">Cargando...</span>
|
|
<button class="btn btn--primary btn--sm" id="btn-new-employee">
|
|
<svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
|
Nuevo Empleado
|
|
</button>
|
|
</div>
|
|
<div class="table-wrapper" style="border: none; border-radius: 0; box-shadow: none;">
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Usuario</th>
|
|
<th>Email</th>
|
|
<th>Rol</th>
|
|
<th>Sucursal</th>
|
|
<th>Estado</th>
|
|
<th>Desc. Max</th>
|
|
<th>Acciones</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="employees-tbody">
|
|
<tr><td colspan="7" style="text-align:center; padding: var(--space-5);">Cargando empleados...</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===============================================================
|
|
SECTION 4: IMPRESORAS
|
|
=============================================================== -->
|
|
<div class="settings-section" data-tab="general">
|
|
<div class="settings-section__header">
|
|
<div class="settings-section__icon">
|
|
<svg viewBox="0 0 24 24"><polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect x="6" y="14" width="12" height="8"/></svg>
|
|
</div>
|
|
<div>
|
|
<div class="settings-section__title">Impresoras</div>
|
|
<div class="settings-section__desc">Configura impresoras de tickets y etiquetas</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="device-grid" id="printerGrid">
|
|
<div class="device-card" style="border-style:dashed;text-align:center;color:var(--color-text-muted);padding:var(--space-8);">
|
|
<div style="font-size:2rem;margin-bottom:var(--space-3);">🖨️</div>
|
|
<div>Sin impresoras configuradas</div>
|
|
<div style="font-size:var(--text-caption);margin-top:var(--space-2);">
|
|
La configuracion de impresoras se hace desde el navegador.<br>
|
|
Ve a <strong>chrome://devices</strong> o usa <strong>Ctrl+P</strong> para imprimir.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===============================================================
|
|
SECTION 5: SUCURSALES
|
|
=============================================================== -->
|
|
<div class="settings-section" data-tab="fiscal">
|
|
<div class="settings-section__header">
|
|
<div class="settings-section__icon">
|
|
<svg viewBox="0 0 24 24"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
|
|
</div>
|
|
<div>
|
|
<div class="settings-section__title">Sucursales</div>
|
|
<div class="settings-section__desc">Gestiona las ubicaciones de tu negocio</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="device-grid" id="branches-grid">
|
|
<div class="device-card"><div class="device-card__body" style="text-align:center;">Cargando sucursales...</div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===============================================================
|
|
SECTION 6: PARÁMETROS FISCALES
|
|
=============================================================== -->
|
|
<div class="settings-section" data-tab="fiscal">
|
|
<div class="settings-section__header">
|
|
<div class="settings-section__icon">
|
|
<svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
|
|
</div>
|
|
<div>
|
|
<div class="settings-section__title">Parámetros Fiscales</div>
|
|
<div class="settings-section__desc">Configuración de facturación electrónica CFDI</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-card">
|
|
<div class="settings-card__title">Certificados y Sellos Digitales</div>
|
|
<div class="form-grid">
|
|
<div class="form-group">
|
|
<label class="form-label">Certificado (.cer)</label>
|
|
<div style="display: flex; align-items: center; gap: var(--space-2);">
|
|
<input class="form-input" type="text" value="CSD_NAU260101ABC_20250115.cer" readonly style="flex:1; opacity: 0.7;" />
|
|
<button class="btn btn--ghost btn--sm">Cambiar</button>
|
|
</div>
|
|
<span class="form-hint">Vigente hasta: 15/01/2029</span>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Llave Privada (.key)</label>
|
|
<div style="display: flex; align-items: center; gap: var(--space-2);">
|
|
<input class="form-input" type="text" value="CSD_NAU260101ABC_20250115.key" readonly style="flex:1; opacity: 0.7;" />
|
|
<button class="btn btn--ghost btn--sm">Cambiar</button>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Contraseña del CSD</label>
|
|
<input class="form-input" type="password" value="••••••••" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">PAC (Proveedor de Certificación)</label>
|
|
<select class="form-select">
|
|
<option selected>Finkok</option>
|
|
<option>Diverza</option>
|
|
<option>Edicom</option>
|
|
<option>SW Sapien</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-card">
|
|
<div class="settings-card__title">Configuración de Facturación</div>
|
|
<div class="toggle-row">
|
|
<div class="toggle-row__info">
|
|
<span class="toggle-row__label">Facturación automática</span>
|
|
<span class="toggle-row__desc">Generar CFDI automáticamente al cerrar una venta</span>
|
|
</div>
|
|
<label class="toggle">
|
|
<input type="checkbox" checked />
|
|
<span class="toggle__slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="toggle-row">
|
|
<div class="toggle-row__info">
|
|
<span class="toggle-row__label">Envío automático por email</span>
|
|
<span class="toggle-row__desc">Enviar PDF y XML al correo del cliente</span>
|
|
</div>
|
|
<label class="toggle">
|
|
<input type="checkbox" checked />
|
|
<span class="toggle__slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="toggle-row">
|
|
<div class="toggle-row__info">
|
|
<span class="toggle-row__label">Factura global diaria</span>
|
|
<span class="toggle-row__desc">Generar CFDI global para ventas sin RFC</span>
|
|
</div>
|
|
<label class="toggle">
|
|
<input type="checkbox" />
|
|
<span class="toggle__slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="toggle-row">
|
|
<div class="toggle-row__info">
|
|
<span class="toggle-row__label">Complemento de pago</span>
|
|
<span class="toggle-row__desc">Generar complemento de pago para cobros parciales</span>
|
|
</div>
|
|
<label class="toggle">
|
|
<input type="checkbox" checked />
|
|
<span class="toggle__slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-card">
|
|
<div class="settings-card__title">Parámetros de Impuestos</div>
|
|
<div class="form-grid">
|
|
<div class="form-group">
|
|
<label class="form-label">Tasa IVA (%)</label>
|
|
<input class="form-input" id="tax-iva" type="number" value="16" step="1" min="0" max="100" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Tasa IEPS (%)</label>
|
|
<input class="form-input" id="tax-ieps" type="number" value="0" step="1" min="0" />
|
|
<span class="form-hint">Dejar en 0 si no aplica</span>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Serie de Facturación</label>
|
|
<input class="form-input" id="tax-serie" type="text" value="FA" maxlength="10" style="text-transform:uppercase;" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Folio Actual</label>
|
|
<input class="form-input" id="tax-folio" type="number" value="1" min="1" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Moneda Predeterminada</label>
|
|
<select class="form-select" id="tax-moneda">
|
|
<option value="MXN">MXN — Peso Mexicano</option>
|
|
<option value="USD">USD — Dólar Americano</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Forma de Pago Default</label>
|
|
<select class="form-select" id="tax-forma-pago">
|
|
<option value="01">01 — Efectivo</option>
|
|
<option value="03">03 — Transferencia Electrónica</option>
|
|
<option value="04">04 — Tarjeta de Crédito</option>
|
|
<option value="28">28 — Tarjeta de Débito</option>
|
|
<option value="99">99 — Por Definir</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="btn-group">
|
|
<button class="btn btn--primary btn--sm" onclick="Config.saveTaxParams()">Guardar Parámetros</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===============================================================
|
|
SECTION 7: PREFERENCIAS DEL SISTEMA
|
|
=============================================================== -->
|
|
<div class="settings-section" data-tab="general">
|
|
<div class="settings-section__header">
|
|
<div class="settings-section__icon">
|
|
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
|
|
</div>
|
|
<div>
|
|
<div class="settings-section__title">Preferencias del Sistema</div>
|
|
<div class="settings-section__desc">Ajustes generales de operación</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-card">
|
|
<div class="toggle-row">
|
|
<div class="toggle-row__info">
|
|
<span class="toggle-row__label">Notificaciones de stock bajo</span>
|
|
<span class="toggle-row__desc">Alertar cuando un producto baje del mínimo configurado</span>
|
|
</div>
|
|
<label class="toggle">
|
|
<input type="checkbox" checked />
|
|
<span class="toggle__slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="toggle-row">
|
|
<div class="toggle-row__info">
|
|
<span class="toggle-row__label">Sonidos de notificación</span>
|
|
<span class="toggle-row__desc">Reproducir sonido al completar una venta o recibir alerta</span>
|
|
</div>
|
|
<label class="toggle">
|
|
<input type="checkbox" checked />
|
|
<span class="toggle__slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="toggle-row">
|
|
<div class="toggle-row__info">
|
|
<span class="toggle-row__label">Cierre de caja obligatorio</span>
|
|
<span class="toggle-row__desc">Requerir cierre de caja al finalizar el turno</span>
|
|
</div>
|
|
<label class="toggle">
|
|
<input type="checkbox" checked />
|
|
<span class="toggle__slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="toggle-row">
|
|
<div class="toggle-row__info">
|
|
<span class="toggle-row__label">Modo offline</span>
|
|
<span class="toggle-row__desc">Permitir ventas sin conexión a internet (sincroniza al reconectar)</span>
|
|
</div>
|
|
<label class="toggle">
|
|
<input type="checkbox" />
|
|
<span class="toggle__slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="toggle-row">
|
|
<div class="toggle-row__info">
|
|
<span class="toggle-row__label">Autocompletado de búsqueda</span>
|
|
<span class="toggle-row__desc">Sugerir productos mientras se escribe en la barra de búsqueda</span>
|
|
</div>
|
|
<label class="toggle">
|
|
<input type="checkbox" checked />
|
|
<span class="toggle__slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="toggle-row">
|
|
<div class="toggle-row__info">
|
|
<span class="toggle-row__label">Modo Kiosko</span>
|
|
<span class="toggle-row__desc">Pantalla completa, bloqueo de pantalla activa, sin menú contextual (ideal para tablet/mostrador)</span>
|
|
</div>
|
|
<label class="toggle">
|
|
<input type="checkbox" id="cfg-kiosk-mode" />
|
|
<span class="toggle__slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="toggle-row">
|
|
<div class="toggle-row__info">
|
|
<span class="toggle-row__label">Permitir ventas en $0</span>
|
|
<span class="toggle-row__desc">Permite vender artículos con precio unitario o total de línea igual a $0</span>
|
|
</div>
|
|
<label class="toggle">
|
|
<input type="checkbox" id="cfg-allow-zero-price" checked />
|
|
<span class="toggle__slider"></span>
|
|
</label>
|
|
</div>
|
|
<div class="toggle-row">
|
|
<div class="toggle-row__info">
|
|
<span class="toggle-row__label">Permitir venta sin stock</span>
|
|
<span class="toggle-row__desc">Permite vender aunque no haya existencias suficientes en la sucursal (stock negativo)</span>
|
|
</div>
|
|
<label class="toggle">
|
|
<input type="checkbox" id="cfg-allow-negative-stock" />
|
|
<span class="toggle__slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===============================================================
|
|
SECTION 8: VEHICLE COMPATIBILITY SOURCE
|
|
=============================================================== -->
|
|
<div class="settings-section" data-tab="catalog">
|
|
<div class="settings-section__header">
|
|
<div class="settings-section__icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
|
|
</div>
|
|
<div>
|
|
<div class="settings-section__title">Compatibilidad de Vehículos</div>
|
|
<div class="settings-section__desc">Elige la fuente para asignar vehículos compatibles a tus productos</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-card">
|
|
<div class="settings-card__title">Fuente de Datos</div>
|
|
<div class="form-grid">
|
|
<div class="form-group">
|
|
<label class="form-label">Método de asignación automática</label>
|
|
<select class="form-select" id="cfg-compat-source">
|
|
<option value="tecdoc">TecDoc — Base de datos oficial de autopartes</option>
|
|
<option value="qwen">QWEN AI — Inteligencia artificial (experimental)</option>
|
|
<option value="both">Ambos — TecDoc primero, QWEN como complemento</option>
|
|
</select>
|
|
<span class="form-hint">Afecta la creación de productos y el botón "Auto-Match"</span>
|
|
</div>
|
|
</div>
|
|
<div style="margin-top: var(--space-4); display: flex; justify-content: flex-end;">
|
|
<button class="btn btn--primary" id="btn-save-compat-source">Guardar</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===============================================================
|
|
SECTION 9: MARCAS DE PARTES PERMITIDAS
|
|
=============================================================== -->
|
|
<div class="settings-section" data-tab="catalog">
|
|
<div class="settings-section__header">
|
|
<div class="settings-section__icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5z"/><polyline points="2 17 12 22 22 17"/></svg>
|
|
</div>
|
|
<div>
|
|
<div class="settings-section__title">Marcas de Partes Permitidas</div>
|
|
<div class="settings-section__desc">Selecciona qué marcas de fabricantes aparecen en el catálogo</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-card">
|
|
<div class="settings-card__title">Fabricantes Aftermarket</div>
|
|
<div id="allowed-brands-container" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--space-3);margin-top:var(--space-4);max-height:300px;overflow-y:auto;padding:var(--space-3);border:1px solid var(--color-border);background:var(--color-bg-base);">
|
|
<p style="color:var(--color-text-muted);font-size:var(--text-body-sm);">Cargando marcas...</p>
|
|
</div>
|
|
<p style="color:var(--color-text-muted);font-size:var(--text-caption);margin-top:var(--space-2);">Si no seleccionas ninguna, se mostrarán todas las partes.</p>
|
|
<div style="margin-top:var(--space-4);display:flex;justify-content:flex-end;">
|
|
<button class="btn btn--primary" id="btn-save-allowed-brands">Guardar Marcas</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ===============================================================
|
|
SECTION 10: MONEDA / CURRENCY
|
|
=============================================================== -->
|
|
<div class="settings-section">
|
|
<div class="settings-section__header">
|
|
<div class="settings-section__icon">
|
|
<svg viewBox="0 0 24 24"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
|
|
</div>
|
|
<div>
|
|
<div class="settings-section__title" data-i18n="currency_config">Moneda</div>
|
|
<div class="settings-section__desc">Configura la moneda y tipo de cambio para ventas</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-card" style="padding:var(--space-5);">
|
|
<div class="form-grid" style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);">
|
|
<div class="form-group">
|
|
<label class="form-label" data-i18n="default_currency">Moneda Predeterminada</label>
|
|
<select class="form-input" id="cfg-currency" style="padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-sm,4px);background:var(--color-bg-base);color:var(--color-text-primary);font-size:var(--text-body-sm);">
|
|
<option value="MXN">$ MXN — Peso Mexicano</option>
|
|
<option value="USD">US$ USD — US Dollar</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label" data-i18n="exchange_rate">Tipo de Cambio USD/MXN</label>
|
|
<input class="form-input" id="cfg-exchange-rate" type="number" step="0.01" min="0.01" value="17.50"
|
|
style="padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-sm,4px);background:var(--color-bg-base);color:var(--color-text-primary);font-size:var(--text-body-sm);font-family:var(--font-mono);" />
|
|
</div>
|
|
</div>
|
|
<div style="margin-top:var(--space-4);display:flex;gap:var(--space-3);align-items:center;">
|
|
<button class="btn btn--primary" id="btn-save-currency" style="padding:var(--space-2) var(--space-4);font-size:var(--text-body-sm);" onclick="Config.saveCurrency()">
|
|
Guardar Moneda
|
|
</button>
|
|
<span id="currency-status" style="font-size:var(--text-caption);color:var(--color-text-muted);"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- ===============================================================
|
|
SECTION: PERMISOS POR ROL
|
|
=============================================================== -->
|
|
<div class="settings-section" data-tab="permissions">
|
|
<div class="settings-section__header">
|
|
<div class="settings-section__icon">
|
|
<svg viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
|
|
</div>
|
|
<div>
|
|
<div class="settings-section__title">Permisos por Rol</div>
|
|
<div class="settings-section__desc">Define los permisos predeterminados para cada rol del sistema</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-card">
|
|
<div class="form-group" style="max-width:320px;">
|
|
<label class="form-label">Rol</label>
|
|
<select class="form-input" id="cfg-perm-role" onchange="Config.renderRolePermissions(); Config.renderWorkshopPermissions();">
|
|
<option value="">Selecciona un rol</option>
|
|
<option value="admin">Administrador</option>
|
|
<option value="cashier">Cajero</option>
|
|
<option value="counter">Mostrador</option>
|
|
<option value="warehouse">Almacén</option>
|
|
<option value="accountant">Contador</option>
|
|
<option value="workshop">Taller</option>
|
|
<option value="mechanic">Mecánico</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Permission tabs -->
|
|
<div class="cfg-tabs" style="margin-top:var(--space-4);position:static;">
|
|
<button type="button" class="cfg-tab-btn active" id="tab-perm-modules" onclick="Config.switchPermTab('modules')">Módulos</button>
|
|
<button type="button" class="cfg-tab-btn" id="tab-perm-workshop" onclick="Config.switchPermTab('workshop')">Taller</button>
|
|
</div>
|
|
|
|
<div id="perm-panel-modules" class="perm-panel active" style="margin-top:var(--space-4);">
|
|
<div id="role-permissions-container">
|
|
<p style="color:var(--color-text-muted);">Selecciona un rol para ver y editar sus permisos.</p>
|
|
</div>
|
|
<div style="margin-top:var(--space-4);">
|
|
<button class="btn btn--primary" id="btn-save-role-permissions" onclick="Config.saveRolePermissions()">Guardar permisos del rol</button>
|
|
<span id="role-permissions-status" style="font-size:var(--text-caption);color:var(--color-text-muted);margin-left:var(--space-3);"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="perm-panel-workshop" class="perm-panel" style="margin-top:var(--space-4);display:none;">
|
|
<div id="workshop-permissions-container">
|
|
<p style="color:var(--color-text-muted);">Selecciona un rol para ver y editar sus permisos de Taller.</p>
|
|
</div>
|
|
<div style="margin-top:var(--space-4);">
|
|
<button class="btn btn--primary" id="btn-save-workshop-permissions" onclick="Config.saveWorkshopPermissions()">Guardar permisos de Taller</button>
|
|
<span id="workshop-permissions-status" style="font-size:var(--text-caption);color:var(--color-text-muted);margin-left:var(--space-3);"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- /content-scroll -->
|
|
</main>
|
|
</div><!-- /app-shell -->
|
|
|
|
<!-- =====================================================================
|
|
MODALS
|
|
===================================================================== -->
|
|
|
|
<!-- Modal: Nueva / Editar Sucursal -->
|
|
<div class="cfg-modal-overlay" id="modal-branch" style="display:none;">
|
|
<div class="cfg-modal" style="max-width:640px;">
|
|
<div class="cfg-modal__header">
|
|
<h3 class="cfg-modal__title" id="branch-modal-title">Nueva Sucursal</h3>
|
|
<button class="cfg-modal__close" onclick="Config.closeModal('modal-branch')">×</button>
|
|
</div>
|
|
<div class="cfg-modal__body">
|
|
<input type="hidden" id="branch-id" value="" />
|
|
<div class="form-grid">
|
|
<div class="form-group form-group--full">
|
|
<label class="form-label">Nombre *</label>
|
|
<input class="form-input" id="branch-name" type="text" placeholder="Ej. Sucursal Norte" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">RFC</label>
|
|
<input class="form-input" id="branch-rfc" type="text" placeholder="ABC010101ABC" maxlength="13" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Razon Social</label>
|
|
<input class="form-input" id="branch-razon" type="text" placeholder="Razon social fiscal" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Regimen Fiscal</label>
|
|
<input class="form-input" id="branch-regimen" type="text" placeholder="601" maxlength="10" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Codigo Postal</label>
|
|
<input class="form-input" id="branch-cp" type="text" placeholder="00000" maxlength="5" />
|
|
</div>
|
|
<div class="form-group form-group--full">
|
|
<label class="form-label">Direccion Fiscal</label>
|
|
<input class="form-input" id="branch-direccion-fiscal" type="text" placeholder="Calle, Colonia, Ciudad" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Serie CFDI</label>
|
|
<input class="form-input" id="branch-serie" type="text" placeholder="A" maxlength="10" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Folio Inicio</label>
|
|
<input class="form-input" id="branch-folio-inicio" type="number" placeholder="1" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Folio Actual</label>
|
|
<input class="form-input" id="branch-folio-actual" type="number" placeholder="1" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Email</label>
|
|
<input class="form-input" id="branch-email" type="email" placeholder="sucursal@empresa.com" />
|
|
</div>
|
|
<div class="form-group form-group--full">
|
|
<label class="form-label">Direccion</label>
|
|
<input class="form-input" id="branch-address" type="text" placeholder="Calle, Colonia, Ciudad" />
|
|
</div>
|
|
<div class="form-group form-group--full">
|
|
<label class="form-label">Telefono</label>
|
|
<input class="form-input" id="branch-phone" type="tel" placeholder="(55) 1234-5678" />
|
|
</div>
|
|
<div class="form-group form-group--full">
|
|
<label class="form-check" style="display:flex;align-items:center;gap:8px;cursor:pointer;">
|
|
<input type="checkbox" id="branch-main" style="width:auto;" />
|
|
<span>Sucursal principal (datos fiscales por defecto)</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="cfg-modal__footer">
|
|
<button class="btn btn--ghost" onclick="Config.closeModal('modal-branch')">Cancelar</button>
|
|
<button class="btn btn--primary" id="btn-save-branch">Guardar Sucursal</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal: Nuevo Empleado -->
|
|
<div class="cfg-modal-overlay" id="modal-employee" style="display:none;">
|
|
<div class="cfg-modal">
|
|
<div class="cfg-modal__header">
|
|
<h3 class="cfg-modal__title">Nuevo Empleado</h3>
|
|
<button class="cfg-modal__close" onclick="Config.closeModal('modal-employee')">×</button>
|
|
</div>
|
|
<div class="cfg-modal__body">
|
|
<div class="form-grid">
|
|
<div class="form-group">
|
|
<label class="form-label">Nombre Completo *</label>
|
|
<input class="form-input" id="emp-name" type="text" placeholder="Nombre y apellido" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Email</label>
|
|
<input class="form-input" id="emp-email" type="email" placeholder="correo@empresa.mx" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Telefono</label>
|
|
<input class="form-input" id="emp-phone" type="tel" placeholder="(55) 1234-5678" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Rol *</label>
|
|
<select class="form-select" id="emp-role">
|
|
<option value="">-- Seleccionar --</option>
|
|
<option value="admin">Administrador</option>
|
|
<option value="cashier">Cajero</option>
|
|
<option value="counter">Mostrador</option>
|
|
<option value="warehouse">Almacenista</option>
|
|
<option value="accountant">Contador</option>
|
|
<option value="workshop">Taller</option>
|
|
<option value="mechanic">Mecanico</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">PIN (4 digitos) *</label>
|
|
<input class="form-input" id="emp-pin" type="password" maxlength="4" pattern="\d{4}" placeholder="0000" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Sucursal</label>
|
|
<select class="form-select" id="emp-branch">
|
|
<option value="">-- Todas --</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Descuento Max. (%)</label>
|
|
<input class="form-input" id="emp-discount" type="number" min="0" max="100" value="0" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="cfg-modal__footer">
|
|
<button class="btn btn--ghost" onclick="Config.closeModal('modal-employee')">Cancelar</button>
|
|
<button class="btn btn--primary" id="btn-save-employee">Guardar Empleado</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/pos/static/js/i18n.js?v=39" defer></script>
|
|
<script src="/pos/static/js/app-init.js?v=8" defer></script>
|
|
<script src="/pos/static/js/splash-loader.js?v=33" defer></script>
|
|
<script src="/pos/static/js/pos-utils.js?v=33" defer></script>
|
|
<script src="/pos/static/js/sidebar.js?v=46" defer></script>
|
|
<script src="/pos/static/js/kiosk.js" defer></script>
|
|
<script src="/pos/static/js/config.js?v=41" defer></script>
|
|
<script src="/pos/static/js/sync-engine.js" defer></script>
|
|
<script>if('serviceWorker' in navigator){navigator.serviceWorker.register('/pos/sw.js',{scope:'/pos/'});}</script>
|
|
<script src="/pos/static/js/pwa-install.js" defer></script>
|
|
|
|
<script src="/pos/static/js/chat.js" defer></script>
|
|
</body>
|
|
</html>
|