# Frontend Jelenlegi Állapot (Current State)

Ez a dokumentum a jelenlegi `frontend` könyvtár állapotát, könyvtárszerkezetét, valamint a technológiai stack és a layout/login elemek felépítését foglalja össze az architektúra tervező AI számára.

## 1. Könyvtárszerkezet

A `frontend` mappa egy Vue 3 + Vite alapú projektstruktúrát követ. 

```text
frontend/
├── Dockerfile, docker-compose.yml, nginx.conf # Infrastruktúra és deployment
├── package.json, vite.config.ts, tsconfig.json # Konfigurációs fájlok (Vite, TS)
├── tailwind.config.js, postcss.config.js       # UI és stílus konfigok
├── public/                                     # Statikus asset-ek (képek, logók)
│   ├── sf_logo_ok.png, sf_alarm_light_01.png, sf_mobile_garage_1.png, stb.
└── src/                                        # Fő forráskód
    ├── App.vue, main.ts, env.d.ts
    ├── assets/                                 # CSS és egyéb bedrótozott assetek (main.css)
    ├── components/                             # Újrafelhasználható Vue komponensek
    │   ├── LanguageSwitcher.vue, ModeSwitcher.vue, TileCard.vue
    ├── layouts/                                # Oldal layoutok (struktúra)
    │   ├── AdminLayout.vue, ConsumerLayout.vue, CorporateLayout.vue
    ├── locales/                                # Nyelvi fájlok (i18n)
    ├── router/                                 # Vue Router beállítások
    │   └── index.ts
    ├── services/                               # API és üzleti logika szolgáltatások
    │   └── translationService.ts
    ├── stores/                                 # Állapotkezelés (Pinia)
    │   ├── appModeStore.ts, authStore.ts
    └── views/                                  # Oldal komponensek (Nézetek)
        ├── AboutView.vue, LandingView.vue, LoginView.vue
        ├── AdminDashboard.vue, AdminSystemView.vue, AdminUsersView.vue, stb.
```

## 2. UI/CSS Keretrendszerek és Routing (Vue Router)

- **UI / CSS Keretrendszer**: Tailwind CSS (v3.4.0) van beállítva (Autoprefixer-rel és PostCSS-sel), egyedi színekkel (pl. `sf-blue`, `sf-green`) és egyéni komponensekkel kiegészítve.
- **Állapotkezelés**: Pinia (v2.1.7).
- **Fordítás (i18n)**: Vue I18n (v9.11.0).
- **Routing**: `vue-router` (v4.3.0) van bekonfigurálva.
  - A `src/router/index.ts`-ben definiált főbb útvonalak: `/` (Landing), `/about`, `/login`, és az adminisztrációs útvonalak (`/admin`, `/admin/users`, `/admin/vehicles` stb.).
  - A router használ metaadatokat (`meta: { layout: 'default' | 'none' | 'admin', requiresAdmin: true }`) a különböző Layout-ok alkalmazásához.
  - Tartalmaz egy **globális navigációs guardot (beforeEach)**, ami a Pinia `authStore`-ra támaszkodva figyeli a bejelentkezett állapotot és blokkolja a jogosulatlan hozzáférést a `requiresAdmin` útvonalakon, valamint megkísérli inicializálni az `authStore`-t az első betöltéskor.

## 3. A Belépési (Login) oldal és Layoutok kialakítása

### Login Oldal (`LoginView.vue`)
- Az útvonalhoz `meta: { layout: 'none' }` van rendelve, így egyedi, layout-független teljes képernyős megjelenést kap.
- Egy komplex vizuális élményt nyújt: a `/sf_mobile_garage_1.png` képet használja homályosított háttérként, egy kék-zöld színátmenettel rétegezve.
- A kártya dizájnt (Glassmorphism stílus, `backdrop-blur-xl`, `bg-white/10`) alkalmaz, amely tartalmaz e-mail, jelszó mezőket, "Emlékezz rám" opciót, valamint integrációs mock gombokat (Apple ID, Google).
- Az adatok beküldését a Pinia `authStore.login()` függvénye dolgozza fel.

### Layoutok (`ConsumerLayout.vue`, `AdminLayout.vue`, `CorporateLayout.vue`)
- Példaként a `ConsumerLayout.vue` egy kidolgozott, responsive fejlécet és láblécet tartalmaz.
- Fix UI elemeket használ, mint például a logó (`sf_logo_ok.png`), naptár grafika (`sf_naptar.png`), és animált (`pulse`) riasztófény (`sf_alarm_light_01.png`), amik a háttérben jelennek meg.
- Dinamikus fejléc-menüt (LanguageSwitcher, ModeSwitcher slotok), reszponzív bejelentkezés gombot és "Quick Actions" paneleket ("Vehicle Registration", "Service Booking", "Cost Tracking") tartalmaz.
- Ez az architekturális irányvonal jelzi, hogy az UI már grafikai koncepciókkal is el lett látva és a felület nagyjából tükrözi az építendő ökoszisztéma hangulatát.

## 4. package.json és főbb függőségek

**Csomagnév:** `service-finder-frontend` (Vue + TypeScript + Vite környezet)

*Fő (Production) függőségek:*
- `vue` (^3.4.0)
- `vue-router` (^4.3.0)
- `pinia` (^2.1.7)
- `vue-i18n` (^9.11.0)
- `axios` (^1.6.0)

*Fejlesztői (Dev) függőségek:*
- `vite` (^5.0.0) és `@vitejs/plugin-vue` (^5.0.0)
- `typescript` (~5.3.0) és `vue-tsc` (^1.8.0)
- `tailwindcss` (^3.4.0), `postcss` (^8.4.32), `autoprefixer` (^10.4.16)
- `eslint` (^8.56.0), `eslint-plugin-vue` és `@vue/eslint-config-typescript`

Összefoglalva: A frontend egy modern Vue 3 (Composition API) alapú architektúrával, TailwindCSS dizájnnal és Vite build eszközzel rendelkezik. A routing, auth és layout struktúra szilárd alapként szolgál a további fejlesztésekhez.