# 🚨 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)

```html
<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:

```css
/* 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:

```html
<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:

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

```ts
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:
```html
<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