service-finder/current_state.md

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.

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.