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

fix: performance improvements, shared UI, and cross-reference data quality

Browse Source 
Backend (server.py):
- Fix N+1 query in /api/diagrams/<id>/parts with batch cross-ref query
- Add LIMIT safety nets to 15 endpoints (50-5000 per data type)
- Add pagination to /api/vehicles, /api/model-year-engine, /api/vehicles/<id>/parts, /api/admin/export
- Optimize search_vehicles() EXISTS subquery to JOIN
- Restrict static route to /static/* subdir (security fix)
- Add detailed=true support to /api/brands and /api/models

Frontend:
- Extract shared CSS into shared.css (variables, reset, buttons, forms, scrollbar)
- Create shared nav.js component (logo + navigation links, auto-highlights)
- Update all 4 HTML pages to use shared CSS and nav
- Update JS to handle paginated API responses

Data quality:
- Fix cross-reference source field: map 72K records from catalog names to actual brands
- Fix aftermarket_parts manufacturer_id: correct 8K records with wrong brand attribution
- Delete 98MB backup file, orphan records, and garbage cross-references
- Add import scripts for DAR, FRAM, WIX, MOOG, Cartek catalogs

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
consultoria-as
2026-02-17 03:09:22 +00:00
parent 3ea2de61e2
commit 7ecf1295a5
17 changed files with 6605 additions and 848 deletions
Download Patch File Download Diff File Expand all files Collapse all files

222
dashboard/admin.html
View File

@@ -5,76 +5,20 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Panel - Autopartes DB</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Orbitron:wght@700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/shared.css">
<style>
/* Admin-specific variable overrides */
:root {
--bg-primary: #0a0a0f;
--bg-secondary: #12121a;
--bg-tertiary: #1a1a25;
--text-primary: #ffffff;
--text-secondary: #8888aa;
--accent: #ff6b35;
--accent-hover: #ff8555;
--success: #00d68f;
--warning: #ffaa00;
--danger: #ff4444;
--border: #2a2a3a;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
background: var(--bg-primary);
color: var(--text-primary);
min-height: 100vh;
}
/* Header */
.header {
background: var(--bg-secondary);
border-bottom: 1px solid var(--border);
padding: 1rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
z-index: 100;
}
.logo {
font-family: 'Orbitron', sans-serif;
font-size: 1.5rem;
color: var(--accent);
text-decoration: none;
}
.header-nav {
display: flex;
gap: 1rem;
}
.header-nav a {
color: var(--text-secondary);
text-decoration: none;
padding: 0.5rem 1rem;
border-radius: 6px;
transition: all 0.2s;
}
.header-nav a:hover {
color: var(--text-primary);
background: var(--bg-tertiary);
}
/* Layout */
.container {
display: flex;
min-height: calc(100vh - 60px);
padding-top: 60px;
}
/* Sidebar */
@@ -257,39 +201,7 @@
gap: 0.5rem;
}
/* Forms */
.form-group {
margin-bottom: 1.25rem;
}
.form-label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
font-size: 0.9rem;
color: var(--text-secondary);
}
.form-input {
width: 100%;
padding: 0.75rem 1rem;
background: var(--bg-tertiary);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--text-primary);
font-size: 0.95rem;
transition: border-color 0.2s;
}
.form-input:focus {
outline: none;
border-color: var(--accent);
}
.form-input::placeholder {
color: var(--text-secondary);
}
/* Forms - admin-specific */
select.form-input {
cursor: pointer;
}
@@ -451,28 +363,6 @@
.badge-premium { background: #5a5a2a; color: #ffff7f; }
.badge-oem { background: #2a2a5a; color: #7f7fff; }
/* Alert */
.alert {
padding: 1rem 1.5rem;
border-radius: 8px;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.alert-success {
background: rgba(0, 214, 143, 0.1);
border: 1px solid var(--success);
color: var(--success);
}
.alert-error {
background: rgba(255, 68, 68, 0.1);
border: 1px solid var(--danger);
color: var(--danger);
}
/* Pagination */
.pagination {
display: flex;
@@ -701,21 +591,12 @@
width: 60px;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
</style>
</head>
<body>
<!-- Header -->
<header class="header">
<a href="/" class="logo">AUTOPARTES DB</a>
<nav class="header-nav">
<a href="/">Catálogo</a>
<a href="/customer-landing.html">Landing</a>
<a href="/admin.html" style="color: var(--accent);">Admin</a>
</nav>
</header>
<!-- Shared Navigation -->
<div id="shared-nav"></div>
<script src="/nav.js"></script>
<div class="container">
<!-- Sidebar -->
@@ -768,6 +649,14 @@
</div>
</div>
<div class="sidebar-section">
<h3>Diagramas</h3>
<div class="sidebar-item" data-section="diagrams">
<span class="icon">📐</span>
<span>Hotspot Editor</span>
</div>
</div>
<div class="sidebar-section">
<h3>Importar/Exportar</h3>
<div class="sidebar-item" data-section="import">
@@ -1237,6 +1126,87 @@
</div>
</div>
</section>
<!-- Diagrams / Hotspot Editor Section -->
<section id="section-diagrams" class="admin-section">
<div class="page-header">
<h1 class="page-title">Editor de Hotspots</h1>
</div>
<div class="card" style="margin-bottom: 1.5rem;">
<p style="color: var(--text-secondary); margin-bottom: 1rem;">
Busca un diagrama por código y haz clic en la imagen para agregar hotspots vinculados a partes.
</p>
<div style="display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap;">
<input type="text" class="form-input" id="diagramSearchInput"
placeholder="Buscar diagrama (ej: F200, S341...)"
style="max-width: 300px;"
onkeypress="if(event.key==='Enter') searchDiagramsAdmin()">
<button class="btn btn-primary" onclick="searchDiagramsAdmin()">
Buscar
</button>
</div>
</div>
<!-- Diagram search results grid -->
<div id="diagramSearchResults" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.5rem;"></div>
<!-- Hotspot Editor Area (shown when a diagram is selected) -->
<div id="hotspotEditorArea" style="display: none;">
<div class="card">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
<h2 id="hotspotEditorTitle" style="margin: 0; font-size: 1.1rem;">Diagrama</h2>
<button class="btn btn-secondary" onclick="closeHotspotEditor()">Cerrar Editor</button>
</div>
<div style="display: flex; gap: 1.5rem; flex-wrap: wrap;">
<!-- Image with click-to-place -->
<div style="flex: 1; min-width: 400px; position: relative; background: #f0f0f0; border-radius: 8px; overflow: hidden; cursor: crosshair;" id="hotspotImageContainer">
<img id="hotspotEditorImg" src="" alt="Diagram"
style="width: 100%; display: block;"
onclick="onHotspotImageClick(event)">
<div id="hotspotMarkersContainer" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;"></div>
</div>
<!-- Hotspot form + list -->
<div style="width: 320px; flex-shrink: 0;">
<h3 style="font-size: 0.95rem; margin-bottom: 0.75rem;">Agregar / Editar Hotspot</h3>
<form id="hotspotForm" style="margin-bottom: 1rem;">
<input type="hidden" id="hsEditId">
<div class="form-group">
<label class="form-label">Posición (x%, y%)</label>
<input type="text" class="form-input" id="hsCoords" placeholder="Clic en imagen..." readonly>
</div>
<div class="form-group">
<label class="form-label"># Callout</label>
<input type="number" class="form-input" id="hsCallout" min="1" value="1">
</div>
<div class="form-group">
<label class="form-label">Parte OEM (buscar)</label>
<input type="text" class="form-input" id="hsPartSearch"
placeholder="Buscar parte por nombre o #..."
oninput="searchPartsForHotspot(this.value)">
<select class="form-input" id="hsPartSelect" size="4" style="margin-top: 0.25rem; display: none;">
</select>
<input type="hidden" id="hsPartId">
</div>
<div class="form-group">
<label class="form-label">Etiqueta</label>
<input type="text" class="form-input" id="hsLabel" placeholder="Opcional">
</div>
<div style="display: flex; gap: 0.5rem;">
<button type="button" class="btn btn-primary" onclick="saveHotspot()">Guardar</button>
<button type="button" class="btn btn-secondary" onclick="clearHotspotForm()">Limpiar</button>
</div>
</form>
<h3 style="font-size: 0.95rem; margin-bottom: 0.5rem;">Hotspots Existentes</h3>
<div id="hotspotsList" style="max-height: 300px; overflow-y: auto;"></div>
</div>
</div>
</div>
</div>
</section>
</main>
</div>