service-finder/docs/p0_vehicle_details_ui_ux_audit_2026-06-19.md

🚨 P0 UI/UX AUDIT — Vehicle Details Page Rendering

Dátum: 2026-06-19
Auditor: Rendszer-Architect
Hatáskör: VehicleDetailsView.vue + all 5 tab components
Státusz: 🔴 KRITIKUS — beavatkozás szükséges

---

1. AUDIT — Fejléc (Header) Olvashatóság

Vizsgált fájl

frontend/src/views/vehicles/VehicleDetailsView.vue

Háttér rétegek (layer stacking)

Réteg	CSS	Leírás
z-0	fixed inset-0 bg-[url('@/assets/garage-bg.png')] bg-cover bg-center bg-fixed (sor 4)	Teljes képernyős garázs háttérkép
z-10	relative mx-auto max-w-7xl px-4 py-8 (sor 7)	Tartalom réteg
Body	bg-[#04151F] (main.css sor 10)	Sötétkék body háttér

Fejléc elemek és színeik

Elem	Sor	CSS class	Szín
Vissza gomb	11	text-white/80 + bg-white/10	80% fehér szöveg, 10% fehér háttér
Rendszám (H1)	40	text-white	#ffffff (tiszta fehér)
Márka/Modell/Év	43	text-white/60	60% fehér (rgba(255,255,255,0.6))
Tab navigáció	52-58	text-white / text-white/50	Tiszta fehér / 50% fehér

🔴 PROBLÉMA: Nincs sötétítő overlay

A VehicleDetailsView.vue:4 egyáltalán nem tartalmaz sötétítő réteget a garage-bg.png fölött. A z-0 rétegen lévő kép közvetlenül a tartalom alatt van, semmilyen bg-black/40, sem backdrop-brightness-50, sem overlay nincs alkalmazva.

Következmény: Ha a garage-bg.png világos színtartományokat tartalmaz (ami egy garázs/workshop képnél tipikus), a text-white és text-white/60 szövegek teljesen olvashatatlanná válnak.

⚠️ Megjegyzés: Ugyanez a probléma áll fenn a FleetView.vue:3-6 esetében is, ahol a komment is jelzi: "Garage Background Image (no dark overlay)".

---

2. AUDIT — Tab Konzisztencia

CSS osztályok összehasonlítása

OverviewTab.vue — 🟦 Light Theme (White Cards)

Elem	CSS class (sor)
Photo div	bg-white border-slate-200 shadow-sm rounded-2xl (sor 6)
Basic Info card	bg-white border-slate-200 shadow-sm rounded-2xl p-6 (sor 15)
MOT card	bg-white border-slate-200 shadow-sm rounded-2xl p-5 (sor 55)
Mileage card	bg-white border-slate-200 shadow-sm rounded-2xl p-5 (sor 72)
Next Service card	bg-white border-slate-200 shadow-sm rounded-2xl p-5 (sor 89)
Szövegszínek	text-slate-900, text-slate-700, text-slate-500

TechDataTab.vue, ServiceBookTab.vue, FinancialsTab.vue, DocumentsTab.vue — 🟩 Dark Glassmorphism Theme (mind a 4)

Elem	CSS class (sor)
Container	bg-white/5 border-white/10 backdrop-blur-sm rounded-2xl p-6 (sor 2)
Szövegszínek	text-white, text-white/50

🔴 PROBLÉMA: Teljes stilisztikai szakadás

Aspektus	OverviewTab	4 másik tab
Háttér	bg-white (tiszta fehér)	bg-white/5 (áttetsző, 5% fehér)
Border	border-slate-200 (sötétszürke)	border-white/10 (halvány fehér)
Szöveg	text-slate-900 (sötétszürke)	text-white (fehér)
Hatás	shadow-sm	backdrop-blur-sm (üvegesség)
Vizuális hangulat	Hagyományos light card	Modern dark glassmorphism

Az OverviewTab.vue teljesen más tervezési rendszert használ, mint a másik 4 tab. Ez vizuális sokkot okoz a tab váltáskor: a többi tab szépen beleolvad a sötét háttérbe, az OverviewTab viszont hirtelen "kiugró" fehér kártyákat mutat.

---

3. AUDIT — Hiányzó Járműfotó

Vizsgált fájl

frontend/src/components/vehicles/tabs/OverviewTab.vue

Jelenlegi állapot (sorok 6-12)

<div class="flex aspect-[16/9] items-center justify-center overflow-hidden
            rounded-2xl border border-slate-200 bg-white shadow-sm lg:aspect-square">
    <img
        src="https://images.unsplash.com/photo-1503376712341-a67b5e40e2d1?auto=format&fit=crop&w=800&q=80"
        alt="Vehicle photo"
        class="h-full w-full object-cover rounded-2xl"
    />
</div>

🔴 PROBLÉMA: 3 rétegű hiba

1. Hardcode-olt stock fotó, nem a valós jármű — A kép URL egy fix Unsplash link, minden járműnél ugyanaz a piros sportautó jelenik meg.

2. Nincs hibakezelés betöltési hibára — Ha az Unsplash CDN:

   • Letiltja a hotlinkinget (CORS/403)
   • Időtúllépés (timeout)
   • Hálózati hiba
   • Akkor a felhasználó egy üres fehér dobozt lát, mert nincs @error eseménykezelés és nincs fallback placeholder.

3. Fehér háttér a sötét téma közepén — A bg-white border-slate-200 miatt, ha a kép nem tölt be, egy nagy fehér téglalap látszik a sötét háttér előtt, ami vizuálisan "kiég".

---

4. Architect Javaslatok

4.1 Fejléc olvashatóság javítása

Ajánlott megoldás: Sötétített overlay réteg bevezetése a header mögött.

Lehetőség A — Header gradient sáv (ajánlott): Helyezzünk egy sötét gradient sávot közvetlenül a fejléc szövegek mögé (relative pozícionálással), ami blokkolja a garage-bg.png világos részeit:

/* Egy sötét gradient overlay a header div-en belül */
.header-overlay {
  background: linear-gradient(to bottom, rgba(4,21,31,0.85) 0%, rgba(4,21,31,0.4) 100%);
  border-radius: 1rem;
  padding: 1.5rem;
}

Lehetőség B — Teljes oldalas overlay (gyors megoldás): A garage-bg.png div és a tartalom közé egy további z-5 réteg:

<div class="fixed inset-0 z-[5] bg-black/40"></div>

4.2 Tab egységesítés

Ajánlott irány: Az összes tabot a Dark Glassmorphism (bg-white/5 backdrop-blur-sm border-white/10) stílusra kell átállítani, hogy az egész oldal egységes, modern, sötét témájú maradjon.

Módosítandó elem	Jelenlegi	Javasolt
OverviewTab photo div	bg-white border-slate-200 shadow-sm	bg-white/5 border-white/10 backdrop-blur-sm
OverviewTab info card	bg-white border-slate-200 shadow-sm p-6	bg-white/5 border-white/10 backdrop-blur-sm p-6
OverviewTab vital cards (x3)	bg-white border-slate-200 shadow-sm p-5	bg-white/5 border-white/10 backdrop-blur-sm p-5
OverviewTab szövegek	text-slate-900/700/500	text-white/90/70/50
Icon bg-k (MOT, mileage, service)	bg-amber-100, bg-blue-100, bg-emerald-100	bg-amber-500/20, bg-blue-500/20, bg-emerald-500/20
Icon színek	text-amber-600, text-blue-600, text-emerald-600	text-amber-300, text-blue-300, text-emerald-300

4.3 Járműfotó javítása

Kötelező változtatások:

1. Dinamikus képforrás — Az src attribute-nak a backendről kell jönnie (pl. vehicle.photo_url), és ha nincs fotó, egy placeholder SVG-t kell mutatni.

2. Fallback és hibakezelés — Az <img> tagon @error eseménykezelő, ami placeholder-re vált:

<img
  :src="vehicle.photo_url || placeholderUrl"
  alt="Vehicle photo"
  class="h-full w-full object-cover rounded-2xl"
  @error="onImageError"
/>

const imageError = ref(false)
const onImageError = () => { imageError.value = true }

3. Placeholder komponens — Ha a kép nem tölt be, egy jármű SVG ikon jelenjen meg:

<div v-if="imageError || !vehicle.photo_url"
     class="flex h-full w-full items-center justify-center bg-white/5">
  <svg class="h-16 w-16 text-white/30" ...>
    <!-- Vehicle silhouette icon -->
  </svg>
  <p class="text-sm text-white/30">{{ t('vehicleDetail.noPhoto') }}</p>
</div>

4.4 Hatásvizsgálat: Érintett fájlok

Fájl	Módosítás típusa
VehicleDetailsView.vue (frontend/src/views/vehicles/VehicleDetailsView.vue)	Overlay réteg hozzáadása a header köré
OverviewTab.vue (frontend/src/components/vehicles/tabs/OverviewTab.vue)	Teljes CSS átállítás light → dark glassmorphism + kép placeholder logika
FleetView.vue (frontend/src/views/vehicles/FleetView.vue)	(Ajánlott) Ugyanez az overlay javítás, mivel itt is ugyanaz a probléma

---

Összefoglaló

#	Probléma	Súlyosság	Érintett fájl(ok)
1	Fehér szöveg világos háttérképen — nincs overlay	🔴 KRITIKUS	VehicleDetailsView.vue:4,40-43
2	Tab stílusok teljes inkonzisztenciája (light vs dark)	🔴 KRITIKUS	OverviewTab.vue vs összes többi tab
3	Hiányzó járműfotó / nincs fallback	🟡 MAGAS	OverviewTab.vue:6-12

Ajánlott beavatkozási sorrend: ① Tab egységesítés (glassmorphism) → ② Header overlay → ③ Photo placeholder + error handling