service-finder/docs/frontend_architecture_2_0_feasibility_analysis.md

Frontend Architektúra 2.0 & Dinamikus Megjelenítési Rendszer

Megvalósíthatósági Elemzés

Dátum: 2026-06-08 Készítette: Rendszer-Architect Mérföldkő: #26 - Frontend Architektúra 2.0 & Dinamikus Megjelenítési Rendszer

---

📊 Készültségi Összesítő

Kártya	Cím	Készültség	Függőség	Fázis
#228	JSONB visual_settings	0%	-	1. Backend
#229	RBAC/ABAC Engedélyezés	40%	#228 (opc.)	1. Backend
#230	Dinamikus/Statikus Fordítás	80%	-	3. i18n
#231	Layout komponensek	60%	#232	2. Frontend
#232	Vue Router Nested Routing	50%	#231	2. Frontend
#233	i18n audit	30%	#230, #232	3. i18n
#234	Tailwind Témaváltó	0%	#228, #229	3. Téma
#235	Expansion Card	0%	#232	4. UI Kit
#236	Vészjelző Rendszer	10%	#232	4. UI Kit

---

1. FÁZIS: Adatbázis és Backend Alapozás

🔴 #228 - JSONB visual_settings (0% kész)

Már létezik:

• Nincs visual_settings mező sem a User modellen, sem az Organization modellen
• Az Organization.notification_settings (JSON) és Organization.external_integration_config (JSON) mintaként szolgálnak a JSONB használathoz
• A User.custom_permissions (JSON) szintén minta a JSON mezőkhöz

Hiányzik:

• visual_settings JSONB mező a User táblában (pl.: theme_mode, primary_color, animations_enabled, compact_mode)
• visual_settings JSONB mező az Organization táblában (pl.: wall_logo_url, brand_color, custom_css_overrides)
• Backend API végpont: PATCH /users/me/visual-settings, PATCH /organizations/{id}/visual-settings
• A UserProfile interface-ben nincs visual_settings mező
• Az OrganizationItem interface-ben nincs visual_settings mező

---

🟡 #229 - RBAC/ABAC Engedélyezés (40% kész)

Már létezik:

• UserRole enum: superadmin, admin, user, fleet_manager, sales, guest
• OrgUserRole enum: owner, admin, manager, driver, viewer
• User.subscription_plan: server_default="FREE"
• Organization.subscription_plan: létező mező
• User.custom_permissions: JSON mező (kiterjeszthető ABAC-hoz)
• UserProfile: role, subscription_plan, scope_level mezők léteznek
• OrganizationItem: subscription_plan mező létezik

Hiányzik:

• allow_custom_skin és allow_advanced_animations feature flag-ok a subscription_plan JSON-ben
• Backend feature flag check utility/service
• Frontend hasFeature(featureName: string): boolean metódus
• Subscription plan definíciók (FREE=max 3 vehicle, BASIC=10, PREMIUM=unlimited)

---

2. FÁZIS: Frontend Struktúra & Layout Szétválasztás

🟡 #231 - Layout komponensek (60% kész)

Már létezik:

• ConsumerLayout.vue: 195 sor, teljes layout headerrel, footerral, dekorációs elemekkel, quick actions grid-del
• CorporateLayout.vue: 98 sor, céges sidebar, quick stats placeholder-ekkel
• AdminLayout.vue: 195 sor, admin sötét sidebar
• Mindhárom layout <slot />-ot használ a tartalom beillesztésére

Hiányzik:

• KRITIKUS: <slot /> → <router-view /> csere mindhárom layout-ban
• ConsumerLayout.vue átnevezése PrivateLayout.vue-ra
• CorporateLayout.vue átnevezése OrganizationLayout.vue-ra
• "Privát felület" gomb az OrganizationLayout.vue-ban (auth store switchOrganization(null) hívás)
• "Céges felület" gomb a PrivateLayout.vue-ban (első business org-ra váltás)
• Layout transition animációk (<Transition> wrapper)

---

🟡 #232 - Vue Router átírás Nested Routing (50% kész)

Már létezik:

• router/index.ts: 83 sor, globális beforeEach guard, auth ellenőrzés, landing redirect
• Route-ok: /, /dashboard, /complete-kyc, /profile, /verify, /reset-password, /company/onboard, /company/garage
• beforeEach guard: kezeli a requiresAuth meta-t, token ellenőrzést

Hiányzik:

• Nincs nested routing - minden route gyökér szinten
• Nincs layout wrapper pattern
• /company/garage route-nak nincs /:id paramétere
• Route meta kiterjesztése: meta: { layout: 'private' | 'organization' | 'admin', requiresOrg: boolean }

Cél nested struktúra:

{
  path: '/',
  component: PrivateLayout,
  children: [
    { path: '', name: 'Landing', component: LandingView },
    { path: 'dashboard', name: 'Dashboard', component: DashboardView, meta: { requiresAuth: true } },
    { path: 'profile', name: 'Profile', component: ProfileView, meta: { requiresAuth: true } },
  ]
},
{
  path: '/company/:id',
  component: OrganizationLayout,
  children: [
    { path: 'dashboard', name: 'OrgDashboard', component: OrgDashboardView, meta: { requiresAuth: true, requiresOrg: true } },
    { path: 'garage', name: 'OrgGarage', component: CompanyGarageView, meta: { requiresAuth: true, requiresOrg: true } },
  ]
}

---

3. FÁZIS: Többnyelvűség (i18n) & Vizuális Témaváltó

🟢 #230 - Dinamikus és Statikus Fordítási Rendszer (80% kész)

Már létezik:

• Backend: Translation modell - TELJESEN KÉSZ (system.translations tábla)
• Frontend: vue-i18n beüzemelve legacy: false módban, detectLocale() függvénnyel
• 6 nyelvi fájl: hu.ts, en.ts, de.ts, ro.ts, cz.ts, sk.ts
• translationService.ts: fetchTranslations(), fetchAllTranslations(), updateTranslation()
• appModeStore.ts: setLanguage(lang), loadTranslations(lang), getTranslation(key, defaultValue)
• LanguageSwitcher.vue: létező komponens

Hiányzik:

• Backend API végpontok ellenőrzése (létezik-e GET /api/v1/translations?)
• Cache stratégia a dinamikus fordításokhoz (localStorage + verziószám)

---

🟠 #233 - i18n audit és szövegek kiszervezése (30% kész)

Már létezik:

• 6 db nyelvi fájl a frontend/src/i18n/ mappában
• hu.ts kulcsstruktúra: menu.*, header.*, dashboard.*, zen.*, auth.*
• DashboardHeader.vue részleges i18n használat ({{ t('menu.features') }})
• Backend JSON locale fájlok: backend/static/locales/hu.json

Hiányzik - Hardcoded szövegek:

1. DashboardView.vue: SZERVIZNAPTÁR, SERVICE FINDER, Irányítópultod és járműveid áttekintése
2. ConsumerLayout.vue: Vehicle Registration, Service Booking, Cost Tracking, Tracking, Documents (6 db), © 2024 Your Company. All rights reserved.
3. CorporateLayout.vue: Organization, Overview, Vehicles, Drivers, Maintenance, Reports (6 db sidebar), 42 vehicles, 7 pending, €12,450
4. CompanyGarageView.vue: Céges garázs

Hiányzó i18n kulcsok:

• garage.private.title, garage.company.title
• buttons.next, buttons.save, buttons.cancel
• errors.* (validációs hibák)
• organization.* (szervezeti nézetek)
• layout.* (layout elemek)
• quickActions.* (gyors akciók)

---

🔴 #234 - Tailwind CSS Változók és Témakezelő (0% kész)

Már létezik:

• tailwind.config.js: 38 sor, egyedi színrendszer (sf-wall, sf-green, sf-blue, sf-accent, sf-dark stb.)
• main.css: 117 sor, btn-premium, hotspot-pulse, hotspot-ring animációk

Hiányzik:

• CSS Custom Properties a tailwind.config.js-ben - nincs var(--theme-*) referencia
• AppThemeStore Pinia store - nem létezik
• Témaváltó logika: light, dark, corporate módok
• :root CSS változók (--theme-bg, --theme-primary, --theme-text, --theme-accent, --theme-glass)
• Sötét mód CSS (dark: osztályok hiányoznak)
• applyTheme(settings) függvény

---

4. FÁZIS: Animált UI Készlet

🔴 #235 - Expansion Card komponens (0% kész)

Már létezik:

• Nincs dedikált Expansion/ExpandableCard komponens
• A DashboardView.vue jármű kártyái group hover effekteket használnak

Hiányzik:

• Teljes ExpansionCard.vue komponens (Vue 3 <script setup lang="ts">)
• Props: title, subtitle, icon, expanded (v-model), variant ('default' | 'premium' | 'glass')
• Animációk: @keyframes expandIn / expandOut
• Slots: #header, #default, #actions

---

🟠 #236 - Kontextuális Vészjelző Rendszer (10% kész)

Már létezik:

• hotspot-pulse és hotspot-ring animációk a main.css-ben
• ConsumerLayout.vue scoped CSS pulse animáció
• Base alert stílus a btn-premium osztályban (glassmorphism)

Hiányzik:

• ContextAlert.vue komponens - nem létezik
• Props: type ('info' | 'warning' | 'error' | 'success'), message, autoClose, dismissible, action
• Alert store (useAlertStore Pinia store)
• Animációk: belépés (slideInDown), kilépés (fadeOutUp)
• Global alert renderelés (App.vue)
• Z-index kezelés

---

🔗 Ajánlott Implementációs Sorrend

Fázis 1 (Backend alapozás):
  #228 (JSONB) ──► #229 (RBAC)

Fázis 2 (Frontend struktúra):
  #231 (Layout-ok) ──► #232 (Router)

Fázis 3 (i18n + Téma):
  #230 (Fordítás) ──► #233 (i18n audit)
  #234 (Témaváltó) - független a #228/#229-től, de azok adják az adatforrást

Fázis 4 (UI Kit):
  #235 (Expansion Card) - független
  #236 (Alert System) - független

---

⚠️ Breaking Change Kockázatok

Változtatás	Érintett komponensek	Kockázat
<slot /> → <router-view />	Minden view	🔴 Magas
Layout átnevezés	Importok minden fájlban	🟡 Közepes
CSS variable bevezetés	Minden komponens színe	🔴 Magas
Router nested átírás	beforeEach guard, view path-ok	🔴 Magas
i18n kulcs átnevezés	Minden $t() hívás	🟡 Közepes