Implement complete autoparts catalog system (5 phases)
FASE 1: Parts Database - Added part_categories, part_groups, parts, vehicle_parts tables - 12 categories, 190 groups with Spanish translations - API endpoints for categories, groups, parts CRUD FASE 2: Cross-References & Aftermarket - Added manufacturers, aftermarket_parts, part_cross_references tables - 24 manufacturers, quality tier system (economy/standard/premium/oem) - Part number search across OEM and aftermarket FASE 3: Exploded Diagrams - Added diagrams, vehicle_diagrams, diagram_hotspots tables - SVG viewer with zoom controls and interactive hotspots - 3 sample diagrams (brake, oil filter, suspension) FASE 4: Search & VIN Decoder - SQLite FTS5 full-text search with auto-sync triggers - NHTSA VIN decoder API integration with 30-day cache - Unified search endpoint FASE 5: Optimization & UX - API pagination (page/per_page, max 100 items) - Dark mode with localStorage persistence - Keyboard shortcuts (/, Ctrl+K, Escape, Backspace, Ctrl+D) - Breadcrumb navigation - ARIA accessibility (labels, roles, focus management) - Skip link for keyboard users Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
65
dashboard/static/diagrams/brake_assembly.svg
Normal file
65
dashboard/static/diagrams/brake_assembly.svg
Normal file
@@ -0,0 +1,65 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="600" height="400" viewBox="0 0 600 400" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="metalGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#b0b0b0"/>
|
||||
<stop offset="50%" style="stop-color:#808080"/>
|
||||
<stop offset="100%" style="stop-color:#606060"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="600" height="400" fill="#f5f5f5"/>
|
||||
|
||||
<!-- Title -->
|
||||
<text x="300" y="30" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#333">
|
||||
Front Brake Assembly / Ensamble de Freno Delantero
|
||||
</text>
|
||||
|
||||
<!-- Brake Rotor (large circle) -->
|
||||
<circle cx="250" cy="200" r="120" fill="url(#metalGrad)" stroke="#333" stroke-width="3" id="rotor"/>
|
||||
<circle cx="250" cy="200" r="100" fill="none" stroke="#555" stroke-width="2"/>
|
||||
<circle cx="250" cy="200" r="40" fill="#444" stroke="#333" stroke-width="2"/>
|
||||
<!-- Rotor ventilation slots -->
|
||||
<line x1="250" y1="60" x2="250" y2="80" stroke="#666" stroke-width="3"/>
|
||||
<line x1="250" y1="320" x2="250" y2="340" stroke="#666" stroke-width="3"/>
|
||||
<line x1="130" y1="200" x2="150" y2="200" stroke="#666" stroke-width="3"/>
|
||||
<line x1="350" y1="200" x2="370" y2="200" stroke="#666" stroke-width="3"/>
|
||||
|
||||
<!-- Brake Caliper -->
|
||||
<rect x="320" y="140" width="80" height="120" rx="10" ry="10" fill="#c0392b" stroke="#922b21" stroke-width="3" id="caliper"/>
|
||||
<rect x="330" y="155" width="60" height="35" rx="5" ry="5" fill="#e74c3c"/>
|
||||
<rect x="330" y="210" width="60" height="35" rx="5" ry="5" fill="#e74c3c"/>
|
||||
<!-- Caliper bolts -->
|
||||
<circle cx="340" cy="150" r="6" fill="#333"/>
|
||||
<circle cx="380" cy="150" r="6" fill="#333"/>
|
||||
<circle cx="340" cy="250" r="6" fill="#333"/>
|
||||
<circle cx="380" cy="250" r="6" fill="#333"/>
|
||||
|
||||
<!-- Brake Pads (visible through caliper) -->
|
||||
<rect x="300" y="160" width="15" height="80" fill="#8b7355" stroke="#5d4e37" stroke-width="2" id="pad-inner"/>
|
||||
<rect x="405" y="160" width="15" height="80" fill="#8b7355" stroke="#5d4e37" stroke-width="2" id="pad-outer"/>
|
||||
|
||||
<!-- Callout lines and numbers -->
|
||||
<!-- Callout 1: Brake Rotor -->
|
||||
<line x1="170" y1="120" x2="100" y2="60" stroke="#333" stroke-width="1.5"/>
|
||||
<circle cx="100" cy="60" r="15" fill="#3498db" stroke="#2980b9" stroke-width="2"/>
|
||||
<text x="100" y="65" text-anchor="middle" font-family="Arial" font-size="14" font-weight="bold" fill="white">1</text>
|
||||
|
||||
<!-- Callout 2: Brake Caliper -->
|
||||
<line x1="400" y1="140" x2="480" y2="80" stroke="#333" stroke-width="1.5"/>
|
||||
<circle cx="480" cy="80" r="15" fill="#3498db" stroke="#2980b9" stroke-width="2"/>
|
||||
<text x="480" y="85" text-anchor="middle" font-family="Arial" font-size="14" font-weight="bold" fill="white">2</text>
|
||||
|
||||
<!-- Callout 3: Brake Pads -->
|
||||
<line x1="307" y1="250" x2="250" y2="320" stroke="#333" stroke-width="1.5"/>
|
||||
<circle cx="250" cy="320" r="15" fill="#3498db" stroke="#2980b9" stroke-width="2"/>
|
||||
<text x="250" y="325" text-anchor="middle" font-family="Arial" font-size="14" font-weight="bold" fill="white">3</text>
|
||||
|
||||
<!-- Legend -->
|
||||
<rect x="440" y="300" width="150" height="90" fill="white" stroke="#ccc" stroke-width="1" rx="5"/>
|
||||
<text x="515" y="320" text-anchor="middle" font-family="Arial" font-size="12" font-weight="bold" fill="#333">Parts / Partes</text>
|
||||
<text x="450" y="340" font-family="Arial" font-size="11" fill="#333">1. Brake Rotor / Disco</text>
|
||||
<text x="450" y="358" font-family="Arial" font-size="11" fill="#333">2. Brake Caliper / Caliper</text>
|
||||
<text x="450" y="376" font-family="Arial" font-size="11" fill="#333">3. Brake Pads / Balatas</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.6 KiB |
73
dashboard/static/diagrams/oil_filter_system.svg
Normal file
73
dashboard/static/diagrams/oil_filter_system.svg
Normal file
@@ -0,0 +1,73 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="600" height="400" viewBox="0 0 600 400" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="oilGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#8B4513"/>
|
||||
<stop offset="100%" style="stop-color:#654321"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="filterGrad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#2c3e50"/>
|
||||
<stop offset="50%" style="stop-color:#34495e"/>
|
||||
<stop offset="100%" style="stop-color:#2c3e50"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="600" height="400" fill="#f5f5f5"/>
|
||||
|
||||
<!-- Title -->
|
||||
<text x="300" y="30" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#333">
|
||||
Oil Filter System / Sistema de Filtro de Aceite
|
||||
</text>
|
||||
|
||||
<!-- Engine Block (simplified) -->
|
||||
<rect x="50" y="100" width="200" height="200" fill="#555" stroke="#333" stroke-width="3" rx="10"/>
|
||||
<text x="150" y="200" text-anchor="middle" font-family="Arial" font-size="14" fill="#ccc">ENGINE</text>
|
||||
<text x="150" y="220" text-anchor="middle" font-family="Arial" font-size="12" fill="#999">MOTOR</text>
|
||||
|
||||
<!-- Oil passage from engine -->
|
||||
<rect x="250" y="180" width="60" height="20" fill="url(#oilGrad)"/>
|
||||
<path d="M250,190 L230,190" stroke="#8B4513" stroke-width="8" fill="none"/>
|
||||
|
||||
<!-- Oil Filter Housing -->
|
||||
<rect x="310" y="120" width="100" height="160" fill="#777" stroke="#555" stroke-width="3" rx="5"/>
|
||||
|
||||
<!-- Oil Filter (canister type) -->
|
||||
<rect x="320" y="140" width="80" height="120" fill="url(#filterGrad)" stroke="#1a252f" stroke-width="3" rx="8" id="oil-filter"/>
|
||||
<!-- Filter ridges -->
|
||||
<line x1="320" y1="160" x2="400" y2="160" stroke="#1a252f" stroke-width="2"/>
|
||||
<line x1="320" y1="180" x2="400" y2="180" stroke="#1a252f" stroke-width="2"/>
|
||||
<line x1="320" y1="200" x2="400" y2="200" stroke="#1a252f" stroke-width="2"/>
|
||||
<line x1="320" y1="220" x2="400" y2="220" stroke="#1a252f" stroke-width="2"/>
|
||||
<line x1="320" y1="240" x2="400" y2="240" stroke="#1a252f" stroke-width="2"/>
|
||||
<!-- Filter label area -->
|
||||
<rect x="335" y="175" width="50" height="50" fill="#2980b9" rx="3"/>
|
||||
<text x="360" y="195" text-anchor="middle" font-family="Arial" font-size="10" fill="white">OIL</text>
|
||||
<text x="360" y="210" text-anchor="middle" font-family="Arial" font-size="10" fill="white">FILTER</text>
|
||||
|
||||
<!-- Oil return passage -->
|
||||
<rect x="410" y="180" width="60" height="20" fill="url(#oilGrad)"/>
|
||||
|
||||
<!-- Oil Pan (simplified) -->
|
||||
<path d="M470,170 L530,170 L550,300 L450,300 Z" fill="#666" stroke="#444" stroke-width="3"/>
|
||||
<text x="500" y="250" text-anchor="middle" font-family="Arial" font-size="12" fill="#ccc">OIL PAN</text>
|
||||
<text x="500" y="265" text-anchor="middle" font-family="Arial" font-size="10" fill="#999">CARTER</text>
|
||||
|
||||
<!-- Flow arrows -->
|
||||
<polygon points="275,185 285,190 275,195" fill="#8B4513"/>
|
||||
<polygon points="435,185 445,190 435,195" fill="#8B4513"/>
|
||||
|
||||
<!-- Callout for Oil Filter -->
|
||||
<line x1="360" y1="140" x2="360" y2="70" stroke="#333" stroke-width="1.5"/>
|
||||
<line x1="360" y1="70" x2="420" y2="70" stroke="#333" stroke-width="1.5"/>
|
||||
<circle cx="420" cy="70" r="15" fill="#3498db" stroke="#2980b9" stroke-width="2"/>
|
||||
<text x="420" y="75" text-anchor="middle" font-family="Arial" font-size="14" font-weight="bold" fill="white">1</text>
|
||||
|
||||
<!-- Legend -->
|
||||
<rect x="50" y="320" width="200" height="60" fill="white" stroke="#ccc" stroke-width="1" rx="5"/>
|
||||
<text x="150" y="340" text-anchor="middle" font-family="Arial" font-size="12" font-weight="bold" fill="#333">Parts / Partes</text>
|
||||
<text x="60" y="360" font-family="Arial" font-size="11" fill="#333">1. Oil Filter / Filtro de Aceite</text>
|
||||
|
||||
<!-- Oil flow label -->
|
||||
<text x="300" y="380" text-anchor="middle" font-family="Arial" font-size="10" fill="#666">Oil Flow Direction / Direccion del Flujo de Aceite</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.9 KiB |
84
dashboard/static/diagrams/suspension_assembly.svg
Normal file
84
dashboard/static/diagrams/suspension_assembly.svg
Normal file
@@ -0,0 +1,84 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="600" height="400" viewBox="0 0 600 400" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="strutGrad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#444"/>
|
||||
<stop offset="50%" style="stop-color:#666"/>
|
||||
<stop offset="100%" style="stop-color:#444"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="springGrad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#27ae60"/>
|
||||
<stop offset="50%" style="stop-color:#2ecc71"/>
|
||||
<stop offset="100%" style="stop-color:#27ae60"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="600" height="400" fill="#f5f5f5"/>
|
||||
|
||||
<!-- Title -->
|
||||
<text x="300" y="30" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="bold" fill="#333">
|
||||
Front Suspension / Suspension Delantera
|
||||
</text>
|
||||
|
||||
<!-- Vehicle body mounting point -->
|
||||
<rect x="180" y="50" width="240" height="30" fill="#555" stroke="#333" stroke-width="2"/>
|
||||
<text x="300" y="70" text-anchor="middle" font-family="Arial" font-size="10" fill="#ccc">BODY / CARROCERIA</text>
|
||||
|
||||
<!-- Strut Mount (top) -->
|
||||
<ellipse cx="300" cy="95" rx="35" ry="15" fill="#888" stroke="#555" stroke-width="2"/>
|
||||
|
||||
<!-- Strut Assembly -->
|
||||
<rect x="285" y="95" width="30" height="150" fill="url(#strutGrad)" stroke="#333" stroke-width="2" id="strut"/>
|
||||
<!-- Strut piston rod -->
|
||||
<rect x="293" y="95" width="14" height="60" fill="#999" stroke="#777" stroke-width="1"/>
|
||||
|
||||
<!-- Coil Spring around strut -->
|
||||
<path d="M275,120 Q310,130 275,140 Q240,150 275,160 Q310,170 275,180 Q240,190 275,200 Q310,210 275,220"
|
||||
fill="none" stroke="url(#springGrad)" stroke-width="8" stroke-linecap="round"/>
|
||||
|
||||
<!-- Lower Control Arm -->
|
||||
<path d="M150,320 L300,280 L450,320" fill="none" stroke="#444" stroke-width="12" stroke-linecap="round"/>
|
||||
<rect x="140" y="310" width="30" height="30" fill="#666" stroke="#444" stroke-width="2" rx="5"/>
|
||||
<rect x="430" y="310" width="30" height="30" fill="#666" stroke="#444" stroke-width="2" rx="5"/>
|
||||
|
||||
<!-- Ball Joint (connecting strut to control arm) -->
|
||||
<circle cx="300" cy="280" r="20" fill="#c0392b" stroke="#922b21" stroke-width="3" id="ball-joint"/>
|
||||
<circle cx="300" cy="280" r="8" fill="#333"/>
|
||||
|
||||
<!-- Steering Knuckle (simplified) -->
|
||||
<rect x="280" y="250" width="40" height="25" fill="#777" stroke="#555" stroke-width="2"/>
|
||||
|
||||
<!-- Wheel hub representation -->
|
||||
<circle cx="300" cy="340" r="40" fill="#444" stroke="#333" stroke-width="3"/>
|
||||
<circle cx="300" cy="340" r="15" fill="#333"/>
|
||||
<text x="300" y="345" text-anchor="middle" font-family="Arial" font-size="8" fill="#999">HUB</text>
|
||||
|
||||
<!-- Sway Bar Link -->
|
||||
<line x1="350" y1="300" x2="420" y2="250" stroke="#555" stroke-width="6"/>
|
||||
<circle cx="350" cy="300" r="6" fill="#777" stroke="#555" stroke-width="2"/>
|
||||
<circle cx="420" cy="250" r="6" fill="#777" stroke="#555" stroke-width="2"/>
|
||||
|
||||
<!-- Callout 1: Strut Assembly -->
|
||||
<line x1="320" y1="150" x2="420" y2="100" stroke="#333" stroke-width="1.5"/>
|
||||
<circle cx="420" cy="100" r="15" fill="#3498db" stroke="#2980b9" stroke-width="2"/>
|
||||
<text x="420" y="105" text-anchor="middle" font-family="Arial" font-size="14" font-weight="bold" fill="white">1</text>
|
||||
|
||||
<!-- Callout 2: Ball Joint -->
|
||||
<line x1="280" y1="280" x2="180" y2="280" stroke="#333" stroke-width="1.5"/>
|
||||
<line x1="180" y1="280" x2="150" y2="250" stroke="#333" stroke-width="1.5"/>
|
||||
<circle cx="150" cy="250" r="15" fill="#3498db" stroke="#2980b9" stroke-width="2"/>
|
||||
<text x="150" y="255" text-anchor="middle" font-family="Arial" font-size="14" font-weight="bold" fill="white">2</text>
|
||||
|
||||
<!-- Callout 3: Control Arm -->
|
||||
<line x1="400" y1="320" x2="500" y2="350" stroke="#333" stroke-width="1.5"/>
|
||||
<circle cx="500" cy="350" r="15" fill="#3498db" stroke="#2980b9" stroke-width="2"/>
|
||||
<text x="500" y="355" text-anchor="middle" font-family="Arial" font-size="14" font-weight="bold" fill="white">3</text>
|
||||
|
||||
<!-- Legend -->
|
||||
<rect x="440" y="50" width="150" height="100" fill="white" stroke="#ccc" stroke-width="1" rx="5"/>
|
||||
<text x="515" y="70" text-anchor="middle" font-family="Arial" font-size="12" font-weight="bold" fill="#333">Parts / Partes</text>
|
||||
<text x="450" y="90" font-family="Arial" font-size="10" fill="#333">1. Strut / Amortiguador</text>
|
||||
<text x="450" y="108" font-family="Arial" font-size="10" fill="#333">2. Ball Joint / Rotula</text>
|
||||
<text x="450" y="126" font-family="Arial" font-size="10" fill="#333">3. Control Arm / Brazo</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.5 KiB |
Reference in New Issue
Block a user