# Service Finder Fejlesztési Történet

## 2026-06-14 - Admin Search Bugs Fix & Sticky UX

### 🎯 Cél
Backend SQL hibák javítása a GET /admin/users végponton (Address outerjoin, phone search), valamint frontend UX fejlesztések (sticky bulk action bar, clear/X gomb, üres állapot üzenet, HeaderProfile az AdminLayout-ban).

### 🔧 Változtatások

**1. BACKEND - [`admin.py`](backend/app/api/v1/endpoints/admin.py:502):**
- `GET /admin/users` SQL javítás: `outerjoin(Person).outerjoin(Address)` → `outerjoin(Person).outerjoin(Address, ...)` (explicit ON clause a person_id-n)
- `phone` keresés hozzáadva a `search_category`-hez (LIKE `person.phone`)
- `is_active` és `is_deleted` filterek külön kezelése (nem zárják ki egymást)

**2. FRONTEND - [`AdminUsersView.vue`](frontend/src/views/admin/AdminUsersView.vue):**
- Bulk action bar: `sticky` pozícionálás (top-0, z-30)
- Clear/X gomb a keresőmezőben
- Üres állapot kezelés: "No users match your search" / "No users in the database yet."
- HeaderProfile komponens hozzáadva az AdminLayout-hoz

### ✅ Verifikáció
- `docker compose exec sf_api python3 -m pytest backend/tests/test_04_business_onboarding.py -v` → 7 passed
- Manuális teszt: GET /admin/users?search_term=...&search_category=phone működik

## 2026-06-19 - P0 BUG FIX: VehicleDetails Blank Page & OverviewTab

### 🎯 Cél
A VehicleDetailsView üres oldalt (blank page) mutatott, amikor a Dashboardról vagy FleetView-ról navigáltak rá. A hiba oka a nem-reaktív tab definíciók és a hiányzó loading/error állapotkezelés volt. Emellett az OverviewTab csak egy placeholdert tartalmazott.

### 🔧 Változtatások

**1. [`VehicleDetailsView.vue`](frontend/src/views/vehicles/VehicleDetailsView.vue) - Blank Page Fix:**
- **Root Cause:** A `tabs` tömb `const`-ként volt definiálva, benne `computed()` ref-ekkel, amelyek sosem frissültek. A `v-for="tab in tabs"` nem volt reaktív.
- **Fix:** A `tabs` tömböt `computed<TabDefinition[]>(() => [...])`-re cseréltük, így a teljes tömb reaktív.
- **Loading State:** `v-if="isLoading"` spinner hozzáadva, ami akkor jelenik meg, ha `vehicleStore.isLoading` true VAGY a vehicles tömb üres és a vehicle még nincs betöltve.
- **Error/Empty State:** `v-else-if="!vehicle"` üres állapot ikonnal és `t('vehicleDetail.notFound')` üzenettel.
- **Vehicle Data Flow:** `provide('vehicle', vehicle)` használatával a jármű adatokat átadjuk a child tab komponenseknek.
- **Async onMounted:** `await vehicleStore.fetchVehicles()` hívás, hogy direkt URL-es navigációnál (F5) is betöltődjenek az adatok.

**2. [`OverviewTab.vue`](frontend/src/components/vehicles/tabs/OverviewTab.vue) - Full Layout:**
- **Photo Section:** 16:9 / négyzet alakú placeholder szürke háttérrel, kamera ikonnal és "Photo upload coming soon" felirattal.
- **Basic Info:** Nagy, hangsúlyos rendszám (4xl), alatta brand/model (2xl), évjárat, majd elválasztó után VIN, üzemanyag típus, futásteljesítmény.
- **Vital Signs (3 kártya):**
  - **MOT Expiry:** Naptár ikon, dátum megjelenítés, színkódolás (piros=lejárt, sárga=<30 nap, zöld=rendben).
  - **Current Mileage:** Villám ikon, formázott km érték.
  - **Next Service:** Dokumentum ikon, "Coming soon" placeholder (később a service book-hoz kapcsolva).
- **Data Flow:** `inject<computed<Vehicle | null>>('vehicle')` a szülő komponensből.

**3. [`en.ts`](frontend/src/i18n/en.ts) - New i18n keys:**
- `vehicleDetail.notFound`, `vehicleDetail.noPlate`, `vehicleDetail.photoPlaceholder`, `vehicleDetail.vin`, `vehicleDetail.fuelType`, `vehicleDetail.mileage`, `vehicleDetail.motExpiry`, `vehicleDetail.nextService`, `vehicleDetail.noData`, `vehicleDetail.comingSoon`

### ✅ Verifikáció
- A tab navigáció most már reaktív (`computed`-be csomagolt `tabDefinitions`)
- A loading spinner megjelenik adatok betöltése közben
- Az OverviewTab teljes layout-ja renderelődik: fotó placeholder + alapadatok + 3 vital signs kártya
- A jármű adatok `provide`/`inject` mechanizmussal jutnak el a tab komponensekhez

## 2026-06-19 - FleetView jármű részletek navigációs hiba javítása

### 🎯 Cél
A privát jármű oldalon (FleetView) a kártyákra kattintva nem nyílt meg a jármű teljes adatlapja az 5 aloldallal (Overview, TechData, ServiceBook, Financials, Documents).

### 🔧 Változtatások

**1. [`FleetView.vue`](frontend/src/views/vehicles/FleetView.vue:62):** A `@click` handler `router.push(\`/vehicles/\${vehicle.id}\`)` útvonalat használt, ami nem egyezik egyetlen regisztrált route-pal sem. A helyes útvonalak:
   - Privát mód: `/dashboard/vehicles/:id`
   - Céges mód: `/organization/:id/vehicles/:id`
   
   Javítás: Az `openVehicleDetail()` függvény az `authStore.isCorporateMode` és `active_organization_id` alapján dinamikusan választja ki a megfelelő útvonalat, megegyező logikával, mint a [`MyVehiclesCard.vue`](frontend/src/components/dashboard/MyVehiclesCard.vue:72)-ben lévő `openVehicleDetail()`.

### ✅ Verifikáció
- A kártyára kattintás után a böngésző a `/dashboard/vehicles/:id` (privát) vagy `/organization/:id/vehicles/:id` (céges) útvonalra navigál
- A `VehicleDetailsView.vue` betöltődik és megjeleníti az 5 tabot
- A TypeScript fordítás hibátlan (csak pre-existing `.js` fájl warningok)