consultoria-as/Autoparts-DB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: complete session — catalog, marketplace, WhatsApp, peer-to-peer, install scripts

Browse Source 
Major features:
- Pixel-Perfect glassmorphism design (landing + POS + public catalog)
- OEM/Local catalog toggle with Nexpart taxonomy (14 groups, 108 subgroups, 558 part types)
- Marketplace B2B Phase 1 (bodegas, POs, status machine, WA+email notifications)
- Peer-to-peer inventory (multi-instance, LAN discovery)
- WhatsApp: photo→Vision AI, voice→Whisper, conversational quotations
- Smart unified search (VIN/plate/part_number/keyword auto-detect)
- Shop Supplies tab (vehicle-independent parts)
- Chatbot AI fallback chain (5 models) + response cache
- CSV inventory import tool + setup_instance.sh installer
- Tablet-responsive CSS + sidebar toggle
- Filters, export CSV, employee edit, business data save
- Quotation system (WA→POS) with auto-print on confirmation
- Live stats on landing page

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
consultoria-as
2026-04-18 05:35:53 +00:00
parent 6b097614a0
commit e95f7cf684
54 changed files with 11226 additions and 1422 deletions
Download Patch File Download Diff File Expand all files Collapse all files

393
dashboard/catalog-public.html
View File

@@ -12,8 +12,10 @@
</script>
<link rel="stylesheet" href="/static/css/tokens.css">
<style>
/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html { scroll-behavior: smooth; scrollbar-width: none; }
html::-webkit-scrollbar { width: 0; }
body {
font-family: var(--font-body);
@@ -21,15 +23,24 @@
color: var(--color-text-primary);
line-height: var(--leading-body);
min-height: 100vh;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
a { color: var(--color-text-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
/* ── Header ── */
/* ==========================================================================
HEADER — Glassmorphism sticky (matches landing)
========================================================================== */
.site-header {
position: sticky; top: 0; z-index: var(--z-sticky);
background: var(--color-bg-elevated);
border-bottom: 1px solid var(--color-border);
position: sticky; top: 0;
z-index: var(--z-sticky);
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
border-bottom: 1px solid var(--glass-border);
}
.site-header .inner {
max-width: var(--content-xl); margin: 0 auto;
@@ -42,17 +53,82 @@
font-weight: var(--heading-weight-primary);
color: var(--color-text-accent);
text-transform: uppercase; letter-spacing: var(--tracking-wide);
text-decoration: none;
position: relative;
}
.logo::after {
content: '';
position: absolute;
bottom: -3px; left: 0; right: 0;
height: 2px;
background: var(--gradient-accent);
border-radius: 1px;
opacity: 0.5;
filter: blur(1px);
}
.header-right { display: flex; gap: var(--space-3); align-items: center; }
.theme-toggle {
background: var(--btn-ghost-bg); border: 1px solid var(--btn-ghost-border);
color: var(--btn-ghost-text); padding: var(--space-1) var(--space-3);
border-radius: var(--radius-md); cursor: pointer; font-size: var(--text-caption);
font-family: var(--font-body); transition: var(--transition-fast);
}
.theme-toggle:hover { background: var(--color-primary-muted); color: var(--color-text-accent); }
/* ── Search bar ── */
/* ── Catalog mode toggle (OEM / Local) ── */
.mode-toggle {
display: inline-flex;
padding: 3px;
background: var(--glass-bg);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px dashed var(--glass-border);
border-radius: var(--radius-md);
gap: 2px;
}
.mode-toggle button {
background: transparent;
border: none;
color: var(--color-text-muted);
padding: 4px 12px;
border-radius: calc(var(--radius-md) - 3px);
font-family: var(--font-mono);
font-size: var(--text-caption);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
cursor: pointer;
transition: all 0.2s var(--ease-out);
}
.mode-toggle button:hover {
color: var(--color-text-accent);
}
.mode-toggle button.is-active {
background: var(--color-primary-muted);
color: var(--color-text-accent);
box-shadow: 0 0 12px var(--glow-color-soft);
}
.theme-toggle {
width: 36px; height: 36px;
display: flex; align-items: center; justify-content: center;
background: transparent;
border: 1px dashed var(--glass-border);
border-radius: var(--radius-md);
color: var(--color-text-muted);
cursor: pointer; font-size: 1rem;
transition: var(--transition-fast);
}
.theme-toggle:hover {
border-color: var(--color-border-accent);
color: var(--color-text-accent);
box-shadow: 0 0 12px var(--glow-color-soft);
}
.header-back {
font-size: var(--text-body-sm);
color: var(--color-text-secondary);
text-decoration: none;
transition: color 0.2s;
}
.header-back:hover { color: var(--color-text-accent); text-decoration: none; }
/* ==========================================================================
SEARCH BAR — Glass style
========================================================================== */
.search-bar {
max-width: var(--content-xl); margin: 0 auto;
padding: var(--space-4) var(--space-6);
@@ -63,34 +139,65 @@
.search-wrapper input {
flex: 1;
padding: var(--space-3) var(--space-4);
background: var(--color-surface-1);
border: 1px solid var(--color-border);
background: var(--glass-bg);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
color: var(--color-text-primary);
font-family: var(--font-body);
font-size: var(--text-body);
outline: none;
transition: var(--transition-fast);
transition: all 0.25s var(--ease-out);
}
.search-wrapper input:focus {
border-color: var(--color-border-focus);
box-shadow: var(--shadow-focus);
box-shadow: 0 0 0 3px var(--glow-color-soft), 0 0 20px var(--glow-color-soft);
}
.search-wrapper input::placeholder { color: var(--color-text-muted); }
/* 3D search button */
.search-wrapper button {
padding: var(--space-3) var(--space-5);
background: var(--btn-primary-bg); color: var(--btn-primary-text);
background: var(--gradient-accent);
color: var(--btn-primary-text);
border: none; border-radius: var(--radius-md);
font-family: var(--font-body); font-size: var(--text-body);
font-weight: var(--font-weight-semibold); cursor: pointer;
transition: var(--transition-fast);
transition: all 0.25s var(--ease-out);
box-shadow: 0 3px 0 var(--color-primary-active),
0 4px 10px var(--glow-color-soft);
position: relative;
overflow: hidden;
}
.search-wrapper button:hover { background: var(--btn-primary-bg-hover); }
.search-wrapper button:hover {
transform: translateY(-1px);
box-shadow: 0 4px 0 var(--color-primary-active),
0 8px 20px var(--glow-color);
}
.search-wrapper button:active {
transform: translateY(1px);
box-shadow: 0 1px 0 var(--color-primary-active);
}
/* Shimmer */
.search-wrapper button::after {
content: '';
position: absolute;
top: 0; left: -100%; width: 60%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: left 0.5s ease;
}
.search-wrapper button:hover::after { left: 120%; }
/* ==========================================================================
REGION BAR — Glass pills
========================================================================== */
/* ── Region bar ── */
.region-bar {
background: var(--color-bg-elevated);
border-bottom: 1px solid var(--color-border);
background: var(--glass-bg);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-bottom: 1px solid var(--glass-border);
padding: var(--space-2) 0;
}
.region-inner {
@@ -101,32 +208,52 @@
.region-label {
font-size: var(--text-caption); font-weight: var(--font-weight-semibold);
color: var(--color-text-muted); text-transform: uppercase;
letter-spacing: var(--tracking-wider); margin-right: var(--space-2);
letter-spacing: var(--tracking-widest); margin-right: var(--space-2);
font-family: var(--font-mono);
}
.region-btn {
background: var(--btn-ghost-bg); border: 1px solid var(--btn-ghost-border);
color: var(--btn-ghost-text); padding: var(--space-1) var(--space-3);
border-radius: var(--radius-md); cursor: pointer; font-size: var(--text-caption);
font-family: var(--font-body); transition: var(--transition-fast);
background: transparent;
border: 1px dashed var(--glass-border);
color: var(--color-text-muted);
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-md); cursor: pointer;
font-size: var(--text-caption);
font-family: var(--font-body);
transition: all 0.25s ease;
}
.region-btn:hover {
border-color: var(--color-border-accent);
color: var(--color-text-accent);
box-shadow: 0 0 12px var(--glow-color-soft);
}
.region-btn:hover { background: var(--color-surface-2); color: var(--color-text-primary); }
.region-btn.is-active {
background: var(--color-primary-muted); color: var(--color-primary);
border-color: var(--color-primary); font-weight: var(--font-weight-semibold);
background: var(--color-primary-muted);
color: var(--color-text-accent);
border-color: var(--color-border-accent);
border-style: solid;
font-weight: var(--font-weight-semibold);
box-shadow: 0 0 16px var(--glow-color-soft);
}
/* ── Breadcrumb ── */
/* ==========================================================================
BREADCRUMB
========================================================================== */
.breadcrumb {
max-width: var(--content-xl); margin: 0 auto;
padding: var(--space-2) var(--space-6);
display: flex; flex-wrap: wrap; gap: var(--space-1);
font-size: var(--text-body-sm);
color: var(--color-text-muted);
font-family: var(--font-mono);
}
.breadcrumb a { color: var(--color-text-accent); }
.breadcrumb .sep { margin: 0 var(--space-1); color: var(--color-text-muted); }
.breadcrumb .sep { margin: 0 var(--space-1); color: var(--color-text-muted); opacity: 0.4; }
/* ==========================================================================
MAIN CONTENT
========================================================================== */
/* ── Main content ── */
.main {
max-width: var(--content-xl); margin: 0 auto;
padding: var(--space-4) var(--space-6) var(--space-16);
@@ -138,25 +265,44 @@
letter-spacing: var(--heading-tracking-h3);
}
/* ── Grid for brands / models / years / engines / categories / groups ── */
/* ==========================================================================
NAV GRID — Glass cards for brands/models/years/engines/categories/groups
========================================================================== */
.nav-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: var(--space-3);
}
.nav-card {
background: var(--color-bg-elevated);
border: 1px solid var(--color-border);
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
padding: var(--space-4) var(--space-5);
cursor: pointer;
transition: var(--transition-fast);
transition: all 0.3s var(--ease-out);
display: flex; align-items: center; justify-content: space-between;
position: relative;
overflow: hidden;
}
/* Top accent line on hover */
.nav-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: var(--gradient-accent);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s var(--ease-out);
}
.nav-card:hover::before { transform: scaleX(1); }
.nav-card:hover {
border-color: var(--color-border-accent);
box-shadow: var(--shadow-sm);
transform: translateY(-1px);
box-shadow: 0 4px 20px var(--glow-color-soft);
transform: translateY(-2px);
}
.nav-card .name {
font-weight: var(--font-weight-semibold);
@@ -168,19 +314,63 @@
font-family: var(--font-mono);
}
/* ── Parts list ── */
/* ==========================================================================
PARTS LIST — Glass rows with glow
========================================================================== */
.parts-list { display: flex; flex-direction: column; gap: var(--space-3); }
.part-row {
background: var(--color-bg-elevated);
border: 1px solid var(--color-border);
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
padding: var(--space-4) var(--space-5);
display: grid;
grid-template-columns: 1fr auto;
gap: var(--space-3);
transition: var(--transition-fast);
transition: all 0.3s var(--ease-out);
}
.part-row:hover { border-color: var(--color-border-accent); }
.part-row:hover {
border-color: var(--color-border-accent);
box-shadow: 0 4px 20px var(--glow-color-soft);
}
/* Local-mode priority highlights */
.part-row--tier1 {
border-color: var(--color-border-accent);
box-shadow: 0 0 16px var(--glow-color-soft);
}
.part-manu {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 10px; margin-bottom: var(--space-2);
background: var(--color-primary-muted);
border: 1px solid var(--glass-border);
border-radius: var(--radius-sm);
font-size: var(--text-caption);
font-weight: var(--font-weight-bold);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
color: var(--color-text-accent);
font-family: var(--font-mono);
}
.part-row--tier2 .part-manu {
background: var(--color-surface-2);
color: var(--color-text-secondary);
}
.part-manu .manu-tier { color: var(--color-primary); font-size: 13px; }
.part-oem-sub { color: var(--color-text-muted); font-weight: var(--font-weight-regular); font-size: var(--text-caption); }
.part-stock {
display: inline-block;
margin-top: var(--space-2);
padding: 2px 10px;
border-radius: var(--radius-full);
font-size: var(--text-caption);
font-weight: var(--font-weight-semibold);
}
.part-stock--yes { background: rgba(63,185,80,0.15); color: #3FB950; border: 1px solid rgba(63,185,80,0.3); }
.part-stock--no { background: var(--color-surface-2); color: var(--color-text-muted); border: 1px dashed var(--glass-border); }
.part-name {
font-weight: var(--font-weight-semibold);
font-size: var(--text-body);
@@ -202,18 +392,20 @@
}
.part-alts span {
display: inline-block;
background: var(--color-surface-2);
background: var(--color-primary-muted);
padding: 2px var(--space-2);
border-radius: var(--radius-sm);
margin-right: var(--space-1);
margin-bottom: var(--space-1);
font-family: var(--font-mono);
border: 1px dashed var(--glass-border);
}
.part-img {
width: 80px; height: 80px;
object-fit: contain;
border-radius: var(--radius-sm);
background: var(--color-surface-2);
background: var(--glass-bg);
border: 1px solid var(--glass-border);
}
.part-detail-btn {
font-size: var(--text-caption);
@@ -221,35 +413,51 @@
cursor: pointer;
border: none; background: none; font-family: var(--font-body);
padding: var(--space-1) 0;
transition: color 0.2s;
}
.part-detail-btn:hover { text-decoration: underline; }
/* ── Pagination ── */
/* ==========================================================================
PAGINATION — Glass buttons
========================================================================== */
.pagination {
display: flex; justify-content: center; gap: var(--space-2);
margin-top: var(--space-6);
}
.pagination button {
padding: var(--space-2) var(--space-4);
background: var(--color-surface-2);
border: 1px solid var(--color-border);
background: var(--glass-bg);
backdrop-filter: blur(8px);
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
color: var(--color-text-primary);
cursor: pointer; font-family: var(--font-body);
transition: var(--transition-fast);
transition: all 0.25s ease;
}
.pagination button:hover {
border-color: var(--color-border-accent);
box-shadow: 0 0 12px var(--glow-color-soft);
}
.pagination button:hover { border-color: var(--color-border-accent); }
.pagination button.active {
background: var(--color-primary);
color: var(--color-text-inverse);
border-color: var(--color-primary);
background: var(--gradient-accent);
color: var(--btn-primary-text);
border-color: transparent;
box-shadow: 0 3px 0 var(--color-primary-active),
0 4px 12px var(--glow-color-soft);
}
.pagination button:disabled { opacity: .4; cursor: default; }
/* ── Search results ── */
/* ==========================================================================
SEARCH RESULTS
========================================================================== */
.search-results { display: flex; flex-direction: column; gap: var(--space-3); }
/* ── Part detail modal ── */
/* ==========================================================================
PART DETAIL MODAL — Glass overlay
========================================================================== */
.modal-overlay {
display: none;
position: fixed; inset: 0;
@@ -258,22 +466,28 @@
justify-content: center; align-items: flex-start;
padding: var(--space-10) var(--space-4);
overflow-y: auto;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.modal-overlay.open { display: flex; }
.modal-content {
background: var(--color-bg-elevated);
border: 1px solid var(--color-border);
background: var(--glass-bg-strong);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid var(--glass-border);
border-radius: var(--radius-lg);
max-width: 700px; width: 100%;
padding: var(--space-8);
position: relative;
box-shadow: 0 24px 48px rgba(0,0,0,0.3);
}
.modal-close {
position: absolute; top: var(--space-3); right: var(--space-3);
background: none; border: none; color: var(--color-text-muted);
font-size: 1.5rem; cursor: pointer; line-height: 1;
transition: color 0.2s;
}
.modal-close:hover { color: var(--color-text-primary); }
.modal-close:hover { color: var(--color-text-accent); }
.detail-section { margin-top: var(--space-6); }
.detail-section h4 {
font-family: var(--font-heading);
@@ -290,36 +504,45 @@
.alt-table th, .alt-table td {
padding: var(--space-2) var(--space-3);
text-align: left;
border-bottom: 1px solid var(--color-border);
border-bottom: 1px solid var(--glass-border);
}
.alt-table th {
color: var(--color-text-muted);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
font-size: var(--text-caption);
letter-spacing: var(--tracking-wider);
letter-spacing: var(--tracking-widest);
font-family: var(--font-mono);
}
/* ── Loading ── */
/* ==========================================================================
LOADING / EMPTY
========================================================================== */
.loading {
text-align: center; padding: var(--space-10);
color: var(--color-text-muted);
font-size: var(--text-body);
}
/* ── Empty state ── */
.empty {
text-align: center; padding: var(--space-10);
color: var(--color-text-muted);
}
/* ── Footer ── */
/* ==========================================================================
FOOTER
========================================================================== */
.site-footer {
padding: var(--space-4) 0; text-align: center;
border-top: 1px solid var(--color-border);
font-size: var(--text-caption); color: var(--color-text-muted);
}
/* ==========================================================================
RESPONSIVE
========================================================================== */
@media (max-width: 640px) {
.nav-grid { grid-template-columns: 1fr; }
.part-row { grid-template-columns: 1fr; }
@@ -332,7 +555,14 @@
<div class="inner">
<a href="/" class="logo">Nexus Autoparts</a>
<div class="header-right">
<button class="theme-toggle" onclick="toggleTheme()">Tema</button>
<div class="mode-toggle" id="modeToggle" title="Cambiar entre catalogo OEM (TecDoc) y marcas locales">
<button data-mode="oem" onclick="setCatalogMode('oem')">OEM</button>
<button data-mode="local" onclick="setCatalogMode('local')">Local</button>
</div>
<a href="/" class="header-back">&larr; Inicio</a>
<button class="theme-toggle" onclick="toggleTheme()" id="themeToggle">
<span id="themeIcon">&#9790;</span>
</button>
</div>
</div>
</header>
@@ -340,11 +570,11 @@
<!-- Country / Region selector -->
<div class="region-bar">
<div class="region-inner">
<span class="region-label">Región:</span>
<button class="region-btn is-active" data-region="north-america" onclick="setRegion('north-america')">🇲🇽 México, 🇺🇸 USA, 🇨🇦 Canadá</button>
<button class="region-btn" data-region="europe" onclick="setRegion('europe')">🇪🇺 Europa</button>
<button class="region-btn" data-region="asia" onclick="setRegion('asia')">🇯🇵 Asia</button>
<button class="region-btn" data-region="all" onclick="setRegion('all')">🌐 Todos</button>
<span class="region-label">Region:</span>
<button class="region-btn is-active" data-region="north-america" onclick="setRegion('north-america')">MX / USA / CA</button>
<button class="region-btn" data-region="europe" onclick="setRegion('europe')">Europa</button>
<button class="region-btn" data-region="asia" onclick="setRegion('asia')">Asia</button>
<button class="region-btn" data-region="all" onclick="setRegion('all')">Todos</button>
</div>
</div>
@@ -373,6 +603,25 @@
<div>&copy; 2026 Nexus Autoparts</div>
</footer>
<script>
// Theme toggle (inline for catalog page)
function toggleTheme() {
var html = document.documentElement;
var current = html.getAttribute('data-theme');
var next = current === 'industrial' ? 'modern' : 'industrial';
html.setAttribute('data-theme', next);
localStorage.setItem('nexus-theme', next);
var icon = document.getElementById('themeIcon');
if (icon) icon.innerHTML = next === 'industrial' ? '&#9790;' : '&#9728;';
}
// Init icon
(function(){
var theme = document.documentElement.getAttribute('data-theme');
var icon = document.getElementById('themeIcon');
if (icon) icon.innerHTML = theme === 'industrial' ? '&#9790;' : '&#9728;';
})();
</script>
<script src="/catalog-public.js"></script>
<!-- AI Chat Widget -->