From 5ade1275debb95911eb269d503c06db045dc8a53 Mon Sep 17 00:00:00 2001
From: consultoria-as <ialcarazsalazar@consultoria-as.com>
Date: Wed, 1 Apr 2026 20:35:02 +0000
Subject: [PATCH] =?UTF-8?q?fix(pos):=20sidebar=20con=20estilo=20del=20desi?=
 =?UTF-8?q?gn=20system=20=E2=80=94=20SVG=20icons,=20secciones,=20clip-path?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Reescrito sidebar.js para coincidir exactamente con el design system:
- Logo NA con clip-path en tema industrial, border-radius en moderno
- Secciones: Principal, Gestion, Sistema
- SVG icons de Feather (mismo trazo 1.75px)
- Border-left accent en item activo
- Toggle de tema con iconos luna/sol
- Footer con avatar, nombre, rol, y boton logout
- 260px width, colapsa a 56px en mobile
- Usa CSS variables del tokens.css

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 pos/static/js/sidebar.js | 297 +++++++++++++++++----------------------
 1 file changed, 128 insertions(+), 169 deletions(-)

diff --git a/pos/static/js/sidebar.js b/pos/static/js/sidebar.js
index 6f8df08..16c8806 100644
--- a/pos/static/js/sidebar.js
+++ b/pos/static/js/sidebar.js
@@ -1,187 +1,146 @@
 /**
- * sidebar.js — Shared sidebar component for all POS pages
- *
- * Injects a consistent sidebar into any page that has a <aside class="sidebar"> or
- * <div id="pos-sidebar-container">. Overrides the page's own sidebar content
- * with a standardized navigation.
+ * sidebar.js — Shared sidebar matching the design system style
+ * Replaces existing sidebar in each page with a consistent, themed version.
  */
 (function() {
     'use strict';
 
-    var employee = window.POS_USER || {};
-    var name = employee.name || 'Usuario';
-    var roleLabel = employee.roleLabel || '';
-    var initials = employee.initials || '?';
+    var u = window.POS_USER || {};
+    var name = u.name || 'Usuario';
+    var roleLabel = u.roleLabel || '';
+    var initials = u.initials || '?';
     var currentPath = window.location.pathname;
-
-    var navItems = [
-        { label: 'Dashboard',     icon: '📊', href: '/pos/dashboard' },
-        { label: 'Punto de Venta', icon: '💰', href: '/pos/sale' },
-        { label: 'Catálogo',      icon: '📦', href: '/pos/catalog' },
-        { label: 'Inventario',    icon: '📋', href: '/pos/inventory' },
-        { label: 'Clientes',      icon: '👥', href: '/pos/customers' },
-        { label: 'Facturación',   icon: '🧾', href: '/pos/invoicing' },
-        { label: 'Contabilidad',  icon: '📒', href: '/pos/accounting' },
-        { label: 'Reportes',      icon: '📈', href: '/pos/reports' },
-        { label: 'Configuración', icon: '⚙️', href: '/pos/config' },
-    ];
-
-    // Build sidebar HTML
-    var linksHtml = navItems.map(function(item) {
-        var isActive = currentPath === item.href;
-        var cls = 'pos-nav__item' + (isActive ? ' is-active' : '');
-        return '<a class="' + cls + '" href="' + item.href + '">'
-            + '<span class="pos-nav__icon">' + item.icon + '</span>'
-            + '<span class="pos-nav__label">' + item.label + '</span>'
-            + '</a>';
-    }).join('');
-
     var currentTheme = localStorage.getItem('pos_theme') || 'industrial';
 
-    var sidebarHtml = ''
-        + '<div class="pos-sidebar__brand">'
-        + '  <div class="pos-sidebar__logo">N</div>'
-        + '  <div class="pos-sidebar__title">Nexus POS</div>'
-        + '</div>'
-        + '<nav class="pos-sidebar__nav">' + linksHtml + '</nav>'
-        + '<div class="pos-sidebar__theme">'
-        + '  <button class="pos-theme-btn' + (currentTheme === 'industrial' ? ' is-active' : '') + '" onclick="posSetTheme(\'industrial\'); document.querySelectorAll(\'.pos-theme-btn\').forEach(function(b){b.classList.remove(\'is-active\')}); this.classList.add(\'is-active\');" title="Tema oscuro">🌙</button>'
-        + '  <button class="pos-theme-btn' + (currentTheme === 'modern' ? ' is-active' : '') + '" onclick="posSetTheme(\'modern\'); document.querySelectorAll(\'.pos-theme-btn\').forEach(function(b){b.classList.remove(\'is-active\')}); this.classList.add(\'is-active\');" title="Tema claro">☀️</button>'
-        + '</div>'
-        + '<div class="pos-sidebar__footer">'
-        + '  <div class="pos-sidebar__user">'
-        + '    <div class="pos-sidebar__avatar">' + initials + '</div>'
-        + '    <div class="pos-sidebar__user-info">'
-        + '      <div class="pos-sidebar__user-name">' + name + '</div>'
-        + '      <div class="pos-sidebar__user-role">' + roleLabel + '</div>'
-        + '    </div>'
-        + '  </div>'
-        + '  <button class="pos-sidebar__logout" onclick="posLogout()" title="Cerrar sesión">⏻</button>'
+    var navSections = [
+        { label: 'Principal', items: [
+            { name: 'Dashboard', href: '/pos/dashboard', icon: '<rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/>' },
+            { name: 'POS', href: '/pos/sale', icon: '<rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/>' },
+            { name: 'Catálogo', href: '/pos/catalog', icon: '<path d="M4 6h16M4 10h16M4 14h16M4 18h16"/>' },
+            { name: 'Inventario', href: '/pos/inventory', icon: '<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"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/>' },
+        ]},
+        { label: 'Gestión', items: [
+            { name: 'Clientes', href: '/pos/customers', icon: '<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.87M16 3.13a4 4 0 0 1 0 7.75"/>' },
+            { name: 'Facturación', href: '/pos/invoicing', icon: '<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"/>' },
+            { name: 'Contabilidad', href: '/pos/accounting', icon: '<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"/>' },
+            { name: 'Reportes', href: '/pos/reports', icon: '<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"/>' },
+        ]},
+        { label: 'Sistema', items: [
+            { name: 'Configuración', href: '/pos/config', icon: '<circle cx="12" cy="12" r="3"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M4.93 4.93a10 10 0 0 0 0 14.14"/>' },
+        ]},
+    ];
+
+    function svgIcon(paths) {
+        return '<svg class="nav-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">' + paths + '</svg>';
+    }
+
+    // Build nav HTML
+    var navHtml = '';
+    navSections.forEach(function(sec) {
+        navHtml += '<div class="nav-section-label">' + sec.label + '</div>';
+        sec.items.forEach(function(item) {
+            var active = currentPath === item.href;
+            navHtml += '<a class="nav-item' + (active ? ' is-active' : '') + '" href="' + item.href + '"'
+                + (active ? ' aria-current="page"' : '') + '>'
+                + svgIcon(item.icon)
+                + '<span>' + item.name + '</span></a>';
+        });
+    });
+
+    // Theme toggle buttons
+    var themeHtml = '<div class="sidebar__theme-toggle">'
+        + '<button class="theme-toggle-btn' + (currentTheme === 'industrial' ? ' is-active' : '') + '" onclick="posSetTheme(\'industrial\');updateThemeButtons()" title="Tema oscuro">'
+        + '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>'
+        + '</button>'
+        + '<button class="theme-toggle-btn' + (currentTheme === 'modern' ? ' is-active' : '') + '" onclick="posSetTheme(\'modern\');updateThemeButtons()" title="Tema claro">'
+        + '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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>'
+        + '</button>'
         + '</div>';
 
-    // Inject CSS
+    window.updateThemeButtons = function() {
+        var t = localStorage.getItem('pos_theme') || 'industrial';
+        document.querySelectorAll('.theme-toggle-btn').forEach(function(b, i) {
+            b.classList.toggle('is-active', i === 0 ? t === 'industrial' : t === 'modern');
+        });
+    };
+
+    var sidebarHtml = ''
+        + '<div class="sidebar__brand">'
+        + '  <div class="brand-logo">NA</div>'
+        + '  <div class="brand-name">'
+        + '    <span class="brand-name__primary">Nexus</span>'
+        + '    <span class="brand-name__sub">Autoparts POS</span>'
+        + '  </div>'
+        + '</div>'
+        + '<nav class="sidebar__nav">' + navHtml + '</nav>'
+        + themeHtml
+        + '<div class="sidebar__footer">'
+        + '  <div class="sidebar__user-avatar">' + initials + '</div>'
+        + '  <div class="sidebar__user-info">'
+        + '    <div class="sidebar__user-name">' + name + '</div>'
+        + '    <div class="sidebar__user-role">' + roleLabel + '</div>'
+        + '  </div>'
+        + '  <button class="sidebar__logout-btn" onclick="posLogout()" title="Cerrar sesión">'
+        + '    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>'
+        + '  </button>'
+        + '</div>';
+
+    // CSS matching the design system
     var css = document.createElement('style');
-    css.textContent = ''
-        + '.pos-sidebar {'
-        + '  position: fixed; top: 0; left: 0; bottom: 0; width: 220px;'
-        + '  background: var(--color-bg-elevated, #161B22);'
-        + '  border-right: 1px solid var(--color-border, #30363D);'
-        + '  display: flex; flex-direction: column;'
-        + '  z-index: 100; overflow-y: auto;'
-        + '  font-family: var(--font-body, sans-serif);'
-        + '  transition: background-color 0.3s;'
-        + '}'
-        + '.pos-sidebar__brand {'
-        + '  display: flex; align-items: center; gap: 10px;'
-        + '  padding: 16px 16px 12px; border-bottom: 1px solid var(--color-border, #30363D);'
-        + '}'
-        + '.pos-sidebar__logo {'
-        + '  width: 36px; height: 36px; border-radius: 8px;'
-        + '  background: var(--color-primary, #F5A623); color: #fff;'
-        + '  display: flex; align-items: center; justify-content: center;'
-        + '  font-weight: 800; font-size: 1.1rem;'
-        + '}'
-        + '.pos-sidebar__title {'
-        + '  font-weight: 700; font-size: 1rem;'
-        + '  color: var(--color-text-primary, #E6EDF3);'
-        + '}'
-        + '.pos-sidebar__nav {'
-        + '  flex: 1; padding: 8px 8px; display: flex; flex-direction: column; gap: 2px;'
-        + '}'
-        + '.pos-nav__item {'
-        + '  display: flex; align-items: center; gap: 10px;'
-        + '  padding: 9px 12px; border-radius: 6px;'
-        + '  color: var(--color-text-secondary, #8B949E);'
-        + '  text-decoration: none; font-size: 0.88rem; font-weight: 500;'
-        + '  transition: all 0.15s;'
-        + '}'
-        + '.pos-nav__item:hover {'
-        + '  background: var(--color-bg-base, rgba(255,255,255,0.05));'
-        + '  color: var(--color-text-primary, #E6EDF3);'
-        + '}'
-        + '.pos-nav__item.is-active {'
-        + '  background: var(--color-primary, #F5A623);'
-        + '  color: #fff; font-weight: 600;'
-        + '}'
-        + '.pos-nav__icon { font-size: 1rem; width: 20px; text-align: center; }'
-        + '.pos-nav__label { white-space: nowrap; }'
-        + '.pos-sidebar__footer {'
-        + '  padding: 12px; border-top: 1px solid var(--color-border, #30363D);'
-        + '  display: flex; align-items: center; justify-content: space-between;'
-        + '}'
-        + '.pos-sidebar__user {'
-        + '  display: flex; align-items: center; gap: 8px;'
-        + '}'
-        + '.pos-sidebar__avatar {'
-        + '  width: 32px; height: 32px; border-radius: 50%;'
-        + '  background: var(--color-primary, #F5A623); color: #fff;'
-        + '  display: flex; align-items: center; justify-content: center;'
-        + '  font-size: 0.75rem; font-weight: 700;'
-        + '}'
-        + '.pos-sidebar__user-name {'
-        + '  font-size: 0.82rem; font-weight: 600;'
-        + '  color: var(--color-text-primary, #E6EDF3);'
-        + '}'
-        + '.pos-sidebar__user-role {'
-        + '  font-size: 0.7rem; color: var(--color-text-muted, #6a6a7a);'
-        + '}'
-        + '.pos-sidebar__logout {'
-        + '  background: none; border: 1px solid var(--color-border, #30363D);'
-        + '  color: var(--color-text-muted, #6a6a7a); border-radius: 6px;'
-        + '  padding: 6px 8px; cursor: pointer; font-size: 1rem;'
-        + '  transition: all 0.15s;'
-        + '}'
-        + '.pos-sidebar__logout:hover {'
-        + '  color: var(--color-error, #F85149);'
-        + '  border-color: var(--color-error, #F85149);'
-        + '}'
-        + '.pos-sidebar__theme {'
-        + '  display: flex; gap: 4px; padding: 8px 12px;'
-        + '  border-top: 1px solid var(--color-border, #30363D);'
-        + '}'
-        + '.pos-theme-btn {'
-        + '  flex: 1; padding: 6px; border: 1px solid var(--color-border, #30363D);'
-        + '  border-radius: 6px; background: none; cursor: pointer;'
-        + '  font-size: 1rem; text-align: center; transition: all 0.15s;'
-        + '}'
-        + '.pos-theme-btn:hover { background: var(--color-bg-base, rgba(255,255,255,0.05)); }'
-        + '.pos-theme-btn.is-active {'
-        + '  background: var(--color-primary, #F5A623);'
-        + '  border-color: var(--color-primary, #F5A623);'
-        + '}'
-        + '/* Push main content right */'
-        + '.pos-main-offset { margin-left: 220px; }'
-        + '@media (max-width: 768px) {'
-        + '  .pos-sidebar { width: 60px; }'
-        + '  .pos-nav__label, .pos-sidebar__title,'
-        + '  .pos-sidebar__user-info { display: none; }'
-        + '  .pos-sidebar__footer { justify-content: center; }'
-        + '  .pos-sidebar__user { justify-content: center; }'
-        + '  .pos-main-offset { margin-left: 60px; }'
-        + '}';
+    css.textContent = [
+        '.pos-sidebar{position:fixed;top:0;left:0;bottom:0;width:260px;display:flex;flex-direction:column;background:var(--color-bg-elevated);border-right:1px solid var(--color-border);z-index:100;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb,#444) var(--scrollbar-track,#222);font-family:var(--font-body)}',
+        '.pos-sidebar::-webkit-scrollbar{width:4px}',
+        '.pos-sidebar::-webkit-scrollbar-track{background:var(--scrollbar-track,#222)}',
+        '.pos-sidebar::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb,#444);border-radius:99px}',
+
+        '.sidebar__brand{display:flex;align-items:center;gap:var(--space-3,12px);padding:var(--space-4,16px) var(--space-4,16px) var(--space-3,12px);border-bottom:1px solid var(--color-border);flex-shrink:0}',
+        '.brand-logo{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--color-primary);color:var(--color-text-inverse,#fff);font-family:var(--font-heading);font-weight:800;font-size:1rem;letter-spacing:-0.04em;flex-shrink:0}',
+        '[data-theme="industrial"] .brand-logo{clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,0 100%)}',
+        '[data-theme="modern"] .brand-logo{border-radius:var(--radius-md,8px)}',
+        '.brand-name__primary{font-family:var(--font-heading);font-weight:800;font-size:0.9375rem;letter-spacing:var(--tracking-wide,0.02em);text-transform:uppercase;color:var(--color-text-primary);line-height:1}',
+        '.brand-name__sub{font-size:var(--text-caption,0.75rem);color:var(--color-text-muted);letter-spacing:var(--tracking-wider,0.04em);text-transform:uppercase;margin-top:2px}',
+
+        '.sidebar__nav{flex:1;padding:var(--space-3,12px) 0}',
+        '.nav-section-label{padding:var(--space-3,12px) var(--space-4,16px) var(--space-1,4px);font-size:0.6875rem;font-weight:600;letter-spacing:var(--tracking-widest,0.08em);text-transform:uppercase;color:var(--color-text-muted)}',
+        '.nav-item{display:flex;align-items:center;gap:var(--space-3,12px);padding:var(--space-2,8px) var(--space-4,16px);color:var(--color-text-secondary);text-decoration:none;font-size:var(--text-body-sm,0.875rem);font-weight:400;border-left:3px solid transparent;transition:all 0.15s;cursor:pointer}',
+        '.nav-item:hover{background:var(--color-surface-2,rgba(255,255,255,0.04));color:var(--color-text-primary)}',
+        '.nav-item.is-active{background:var(--color-primary-muted,rgba(245,166,35,0.12));color:var(--color-primary);border-left-color:var(--color-primary);font-weight:600}',
+        '.nav-item__icon{width:18px;height:18px;flex-shrink:0;opacity:0.7}',
+        '.nav-item.is-active .nav-item__icon{opacity:1}',
+
+        '.sidebar__theme-toggle{display:flex;gap:4px;padding:8px 16px;border-top:1px solid var(--color-border)}',
+        '.theme-toggle-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:6px;border:1px solid var(--color-border);border-radius:var(--radius-sm,4px);background:none;color:var(--color-text-muted);cursor:pointer;transition:all 0.15s;font-size:0.75rem}',
+        '.theme-toggle-btn:hover{color:var(--color-text-primary);background:var(--color-surface-2,rgba(255,255,255,0.04))}',
+        '.theme-toggle-btn.is-active{background:var(--color-primary-muted,rgba(245,166,35,0.12));color:var(--color-primary);border-color:var(--color-primary)}',
+
+        '.sidebar__footer{padding:var(--space-3,12px) var(--space-4,16px);border-top:1px solid var(--color-border);display:flex;align-items:center;gap:var(--space-2,8px)}',
+        '.sidebar__user-avatar{width:28px;height:28px;border-radius:50%;background:var(--color-primary);color:var(--color-text-inverse,#fff);display:flex;align-items:center;justify-content:center;font-size:0.6875rem;font-weight:700;flex-shrink:0}',
+        '.sidebar__user-info{flex:1;overflow:hidden}',
+        '.sidebar__user-name{font-size:var(--text-body-sm,0.875rem);font-weight:600;color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}',
+        '.sidebar__user-role{font-size:var(--text-caption,0.75rem);color:var(--color-text-muted)}',
+        '.sidebar__logout-btn{background:none;border:1px solid var(--color-border);border-radius:var(--radius-sm,4px);padding:4px 6px;cursor:pointer;color:var(--color-text-muted);transition:all 0.15s;display:flex;align-items:center}',
+        '.sidebar__logout-btn:hover{color:var(--color-error,#F85149);border-color:var(--color-error,#F85149)}',
+
+        '.pos-main-offset{margin-left:260px}',
+        '@media(max-width:768px){.pos-sidebar{width:56px}.brand-name,.nav-item span,.sidebar__user-info,.nav-section-label,.sidebar__theme-toggle{display:none}.sidebar__brand{justify-content:center;padding:12px 8px}.sidebar__footer{flex-direction:column;padding:8px}.pos-main-offset{margin-left:56px}}',
+    ].join('\n');
     document.head.appendChild(css);
 
-    // Find or create sidebar container
-    // Strategy: replace existing sidebar content or create new one
-    var existingSidebar = document.querySelector('aside.sidebar, .sidebar, #sidebar');
-
-    if (existingSidebar) {
-        // Replace existing sidebar content
-        existingSidebar.className = 'pos-sidebar';
-        existingSidebar.innerHTML = sidebarHtml;
-        existingSidebar.removeAttribute('style');
+    // Replace existing sidebar
+    var existing = document.querySelector('aside.sidebar, .sidebar, #sidebar');
+    if (existing) {
+        existing.className = 'pos-sidebar';
+        existing.innerHTML = sidebarHtml;
+        existing.removeAttribute('style');
     } else {
-        // Create new sidebar
-        var sidebar = document.createElement('aside');
-        sidebar.className = 'pos-sidebar';
-        sidebar.innerHTML = sidebarHtml;
-        document.body.insertBefore(sidebar, document.body.firstChild);
+        var el = document.createElement('aside');
+        el.className = 'pos-sidebar';
+        el.innerHTML = sidebarHtml;
+        document.body.insertBefore(el, document.body.firstChild);
     }
 
-    // Add offset class to main content
-    var mainContent = document.querySelector('main, .main-content, #mainContent, .page-content');
-    if (mainContent) {
-        mainContent.classList.add('pos-main-offset');
-    }
+    // Offset main content
+    var main = document.querySelector('main, .main-content, #mainContent, .main, .page-content');
+    if (main) main.classList.add('pos-main-offset');
 
 })();